Hi Team! We in Kibana have started working on upgrading to React@18 elastic/kibana#138222 (comment). We hope that we can do a gradual upgrade where we first upgrade Kibana react packages to React@18 version, and run Kibana with these packages with ReactDOM.render legacy mode, and allow teams to upgrade to createRoot runtime gradually.
Unfortunately, we're now observing some runtime changes in React@17 -> React@18 in legacy mode. We're not sure yet how bad the changes are and if we continue with this gradual migration plan. The changes don't seem to be properly documented by the React team. But our functional tests discovered some issues and a very common one is with EuiTable/EuiMemoryTable and EuiSearchBar integration.
It looks like React@18 in legacy mode discovered some problems there with state management that I hope we could look at.
The problem in our tests shows up as if some of the keys from the keyboard input are skipped when typing into the EuiSearchBar
Should be my-favorite but typed my-fvoir
I tried to reproduce in sandbox: https://codesandbox.io/p/sandbox/fast-fast-6hvctr?file=%2Fdemo.tsx
If you play with it and type with different speed, you'll see that the input has problems and sometimes the input is skipped
See I typed anton but only aton was registered by the input
We've spent quite a bit of time debugging, and I pinpointed the problem to this state management place:
|
useUpdateEffect(() => { |
|
if (inputRef.current) { |
|
inputRef.current.value = query; |
|
inputRef.current.dispatchEvent(new Event('change')); |
|
} |
|
}, [query]); |
What happens is when I type "Anton" " after typing the "A" "n" the component could re-render, and the effect is triggered with query a and overrides the an in the input with a from the query
I don't know the details of what has changed in React internals and why this could happen now but not before, but our tests reliably fail due to this in a lot of places where tables and search bars are used. I wonder if some of you would have more experience and insight to understand why this breaks.
I understand that running EUI with React@18 in legacy mode was probably not something we'd explicitly test or support, but I'd like to ask for some help looking deeper into this and maybe addressing this particular place. It might be that we'd drop this legacy mode idea if we'd see more issues like this, but for now would like to try to address this
Hi Team! We in Kibana have started working on upgrading to React@18 elastic/kibana#138222 (comment). We hope that we can do a gradual upgrade where we first upgrade Kibana react packages to React@18 version, and run Kibana with these packages with ReactDOM.render legacy mode, and allow teams to upgrade to
createRootruntime gradually.Unfortunately, we're now observing some runtime changes in React@17 -> React@18 in legacy mode. We're not sure yet how bad the changes are and if we continue with this gradual migration plan. The changes don't seem to be properly documented by the React team. But our functional tests discovered some issues and a very common one is with
EuiTable/EuiMemoryTableandEuiSearchBarintegration.It looks like React@18 in legacy mode discovered some problems there with state management that I hope we could look at.
The problem in our tests shows up as if some of the keys from the keyboard input are skipped when typing into the
EuiSearchBarShould be
my-favoritebut typedmy-fvoirI tried to reproduce in sandbox: https://codesandbox.io/p/sandbox/fast-fast-6hvctr?file=%2Fdemo.tsx
If you play with it and type with different speed, you'll see that the input has problems and sometimes the input is skipped
See I typed
antonbut onlyatonwas registered by the inputWe've spent quite a bit of time debugging, and I pinpointed the problem to this state management place:
eui/packages/eui/src/components/search_bar/search_box.tsx
Lines 42 to 47 in b736b90
What happens is when I type "Anton" " after typing the "A" "n" the component could re-render, and the effect is triggered with
queryaand overrides theanin the input withafrom thequeryI don't know the details of what has changed in React internals and why this could happen now but not before, but our tests reliably fail due to this in a lot of places where tables and search bars are used. I wonder if some of you would have more experience and insight to understand why this breaks.
I understand that running EUI with React@18 in legacy mode was probably not something we'd explicitly test or support, but I'd like to ask for some help looking deeper into this and maybe addressing this particular place. It might be that we'd drop this legacy mode idea if we'd see more issues like this, but for now would like to try to address this