DataTable: Filter Menu not displayed when inside <React.StrictMode> in React 18

[inad9300]

In case it helps you with the adoption of React 18,

I'm submitting a...

[x] bug report
[ ] feature request
[ ] support request

Codesandbox Case
https://codesandbox.io/s/primereact-test-forked-vkirpl?file=/src/index.js

Current behavior
When opening the filter menu, only the "Clear" and "Apply" buttons appear.

Expected behavior
The actual filters should be shown too.

• React version: 18.0.0
• PrimeReact version: 8.0.0-rc.2
• Browser: at least Chromium

Does NOT Work:

ReactDOM.createRoot(document.getElementById("root3")).render(
  // remove StricMode and the app works fine
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Works:

ReactDOM.createRoot(document.getElementById("root3")).render(
    <App />
);

[melloware]

I updated your code sandbox reproducer to better show the issue: https://codesandbox.io/s/primereact-test-forked-vkirpl?file=/src/index.js

Does NOT Work:

ReactDOM.createRoot(document.getElementById("root3")).render(
  // remove StricMode and the app works fine
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Works:

ReactDOM.createRoot(document.getElementById("root3")).render(
    <App />
);

[melloware]

Found this: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode

Look like Strict Mode is way different in React 18 it must be causing this issue <StrictMode>

[leischj]

Just wanted to add that using filterDisplay={'row'} also is failing in with React 18 (in StrictMode). It fails with this error:

TypeError
Cannot set properties of undefined (setting 'value')
onInputChange ......

I forked the sandbox here: https://codesandbox.io/s/primereact-test-forked-5nx688?file=/src/index.js

[JeffreyStevens]

I also have this error in my project, thank you!

[desmondsow]

Hi @melloware, submitted a PR for this issue. Fix both this issue and #2947

[melloware]

Excellent thank you for the PR!