more errors logged as i posted this

one from another mac user, same user agent

several other users, slightly different error, all firefox

"error: this.view2 is null "
user agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:100.0) Gecko/20100101 Firefox/100.0

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.

I thought I had tried that... it works.

However, this is not needed on other components extended from FieldBase.

I'll add that adding the hack still results in a null key in the form model.  not the end of the world, but it's not right.

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:

Code:

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.

Code:

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;

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?

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?

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

Code:

.tooltip {
  opacity: 1;
}

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.

finally got it, it was my form dynamic rules.

I was ending up with a form rule like ["required", "length[5,undefined]"].  entirely my fault, but very hard to debug.

I'm using create-react-app if that matters.

I'm only getting this error after I build the project

Code:

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?

perfect and easy, thanks.

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

Code:

useEffect(() => {
  if (mygrid.current) {
    mygrid.current.expandRow(gridata[0]);
  }
}, [gridata])

but this only expands the last row.

Code:

useEffect(() => {
  if (mygrid.current) {
    gridata.forEach(p => {
      mygrid.current.expandRow(p);
    });
  }
}, [gridata])

but this expands all rows.  

Code:

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.

Code:

$("#test").combo({
required:true,
label: "test",
onChange: function(n,o) {
console.log(n, o)
}
});

onChange never fires, and getValue returns empty string.

space still doesn't toggle in firefox