Show Posts
|
Pages: 1 [2] 3 4 ... 15
|
17
|
General Category / EasyUI for React / error: null is not an object (evaluating 'this.view2.body')
|
on: May 27, 2022, 09:32:31 AM
|
recently upgraded to react 18.1.0 and rc-easyui 1.2.6 and got this error in my log. I have an ErrorBoundary setup that captures errors and send them to my sever.
I have not been able to reproduce it, but I think the user has a mac and I don't have access to one at the moment. user agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15
maybe relayed, I'm also getting "Cannot read properties of null (reading 'body')" that I can reproduce, but as far as I can tell that one isn't coming from jeasyui. "this.view2.body" is pretty clearly from your datagrid. I'm seeing it on only 2 of my pages, and both use groupField/renderGroup. I have not seen it on pages that have datagrids that aren't grouped.
|
|
|
20
|
General Category / EasyUI for React / Radio button in forms
|
on: April 27, 2021, 10:01:28 AM
|
Trying to figure out how to use a RadioButton on a form, and it seems to be having an internal battle. Code below is my test case that shows the issue, I consider it incomplete, but other than adding hacks I'm not sure how to complete it. To test, click "A option 1", then click "A option 2". On the console you'll see: optA 1 true handleFormChange null 1 optA 2 true handleFormChange null 2
The battle is that is radio change AND the form change are both firing, except the form change has a NULL field name, which is a problem. The easy hack is to ignore null field names in the form change, but it just doesn't seem right. import React, { useState } from 'react'; import './App.css'; import { Form, FormField, Label, RadioButton, } from 'rc-easyui';
function App() { const [model, setModel] = useState({}); const opts = { optA: [ { value: 1, text: "A option 1" }, { value: 2, text: "A option 2" }, ], optB: [ { value: 1, text: "B option 1" }, { value: 2, text: "B option 2" }, ], }
function handleOpt(name, value, checked) { console.log(name, value, checked) if (checked) { const newData = { ...{}, ...model }; newData[name] = value; //setModel(newData); } }
function handleFormChange(name, val) { console.log("handleFormChange", name, val) }
return ( <Form model={model} onChange={handleFormChange} > <FormField name="optA" value={model.optA}> <label>A Option:</label> {opts.optA.map(opt => { return (<div key={opt.value}> <RadioButton inputId={"optA" + opt.value} value={opt.value} groupValue={model.optA} onChange={(checked) => handleOpt("optA", opt.value, checked)} /> <Label htmlFor={"optA" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label> </div>) })} </FormField> <FormField name="optB" value={model.optB}> <label>B Option:</label> {opts.optB.map(opt => { return (<div key={opt.value}> <RadioButton inputId={"optB" + opt.value} value={opt.value} groupValue={model.optB} onChange={(checked) => handleOpt("optB", opt.value, checked)} /> <Label htmlFor={"optB" + opt.value} style={{ margin: '0 5px' }}>{opt.text}</Label> </div>) })} </FormField> <div> {JSON.stringify(model)} </div>
</Form> ); } export default App;
|
|
|
21
|
General Category / EasyUI for React / Re: Tooltip issue
|
on: March 26, 2021, 11:12:30 AM
|
it's from the bootstrap 4.0.0 cdn, shown via sourcemap, so I'm not 100% sure where it actually comes from. bootstrap.min.css is imported via the react-chatbox-component package.
Is there a way I can control the order things are imported and evaluated without ejecting and doing it manually? Or is my work-around my most maintainable option?
|
|
|
22
|
General Category / EasyUI for React / Re: Tooltip issue
|
on: March 25, 2021, 02:53:15 PM
|
it's not anything I made, I assumed webpack generates it from your css.
due to the nature of the tooltips I can't click around to find out what it is, moving the mouse removes it from the DOM. any tips on tracking it down?
|
|
|
23
|
General Category / EasyUI for React / Re: Tooltip issue
|
on: March 24, 2021, 11:32:51 AM
|
I found the cause, I don't know how to fix it correctly. Attached a screen shot comparing the rendered styles of a build vs a start. you can see the order the styles is applied is different causing the opacity to override differently. My current workaround for the tooltip is to add this to my index.css
|
|
|
24
|
General Category / EasyUI for React / Re: Checkbox issue in firefox
|
on: February 25, 2021, 02:27:35 PM
|
finally got around to this one, tabIndex has no affect.
the checkbox receives focus fine either way, just that pressing space bar once you see a check and an uncheck, there's no way to leave it checked without grabbing the mouse.
actually it seems to only be happening on one form, I'll try to make a test case.
|
|
|
26
|
General Category / EasyUI for React / Error after build that I don't know how to proceed
|
on: February 03, 2021, 11:44:22 AM
|
I'm using create-react-app if that matters. I'm only getting this error after I build the project react_devtools_backend.js:2430 SyntaxError: Unexpected token u in JSON at position 3 at JSON.parse (<anonymous>) at c (rc-easyui-min.js:10) at t.value (rc-easyui-min.js:10) at rc-easyui-min.js:10 at Array.forEach (<anonymous>) at t.value (rc-easyui-min.js:10) at t.value (rc-easyui-min.js:10) at os (react-dom.production.min.js:212) at du (react-dom.production.min.js:255) at t.unstable_runWithPriority (scheduler.production.min.js:19)
I assume it's something in my data from my api server, but I'm just not finding anything. Pointing a dev instance at the production api server does not give any errors. how can figure out exactly what it's having an issue with?
|
|
|
28
|
General Category / EasyUI for React / Nested datagrid expanding oddities
|
on: January 22, 2021, 02:52:18 PM
|
trying to make a nested data grid expanded always. would be nice to have that as an option. in this example, gridata is a useState() array and mygrid is a useRef(). this expands the first row as expected useEffect(() => { if (mygrid.current) { mygrid.current.expandRow(gridata[0]); } }, [gridata])
but this only expands the last row. useEffect(() => { if (mygrid.current) { gridata.forEach(p => { mygrid.current.expandRow(p); }); } }, [gridata])
but this expands all rows. useEffect(() => { if (mygrid.current) { gridata.forEach(p => { setTimeout(() => { mygrid.current.expandRow(p); }, 1); }); } }, [gridata])
not sure I understand why, but if you have this issue, this is your workaround. Additionally, updating the gridata causes the grid to collapse all rows automatically. Would be handy to have a parameter that could default a row expanded or not based on the row data, that way we could flag the new data for which rows should be expanded after the refresh.
|
|
|
|