ui5-webcomponents: Table: Filtering items in table crashes app on Safari
Describe the bug
When the items of the Table component change, the whole application crashes on Safari.
Isolated Example sandbox
To Reproduce Steps to reproduce the behavior:
- Go to the sandbox
- Click on the input
- Type something
- The page crashes
Expected behavior
The Table component should be able to handle element filtering
Screenshots If applicable, add screenshots to help explain your problem.
UI5 Web Components for React Information
@ui5/webcomponents version: latest (1.10.3)
@ui5/webcomponents-react version: 1.8.1
Operating System: Mac OS Ventura 13.2.1
Browser: Safari Version 16.3 (18614.4.6.1.6)
Additional context When the keys in React are not unique the page works correctly. Unfortunately, once the keys are switched to unique(as it should be) the whole application crashes. The bug happens both on iPhone and Mac.
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 22 (9 by maintainers)
Commits related to this issue
- fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to crash upon component re-rendering Fixes: #6570 — committed to SAP/ui5-webcomponents by deleted user a year ago
- fix(ui5-table): prevent Safari from crashing (#6888) * fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to ... — committed to SAP/ui5-webcomponents by ndeshev a year ago
- fix(ui5-table): prevent Safari from crashing (#6888) * fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to ... — committed to SAP/ui5-webcomponents by ndeshev a year ago
- fix(ui5-table): prevent Safari from crashing (#6888) * fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to ... — committed to SAP/ui5-webcomponents by ndeshev a year ago
- fix(ui5-table): prevent Safari from crashing (#6888) * fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to ... — committed to SAP/ui5-webcomponents by ndeshev a year ago
- fix(ui5-table): prevent Safari from crashing (#6888) * fix(ui5-table): prevent Safari from crashing The combination of display: table-cell and overflow: hidden styles was causing the browser to ... — committed to SAP/ui5-webcomponents by ndeshev a year ago
Hello @AndrianStoikov @Lukas742 the issue has been fixed and released with the latest 1.13.0-rc.1 https://github.com/SAP/ui5-webcomponents/releases/tag/v1.13.0-rc.1
@Lukas742 probably we need to align how to make it available via the ui5-webcompoents-react package
I tried two more things: My first try was inlining the filter function, so that we can omit the
useEffect. Unfortunately, the result is still the same: https://codesandbox.io/s/great-hill-2et7teThe same applies when adding the event listener without React and removing the
valueprop from the input: https://codesandbox.io/s/fragrant-dust-jv65fh?file=/src/App.jsI think without the
keyit won’t break as it doesn’t force the component to rerender. Every time thekeyof a given item in the list changes, React knows that something has changed and that it has to update the component. So the issue here has probably something to do with the update cycle of React in combination with how theTablehandles updates.I just tested rendering only the
TableRows (without theTable) and then it works fine: https://codesandbox.io/s/keen-paper-eku3n2?file=/src/App.js@AndrianStoikov a colleague just pointed out to me that it’s possible to find the crash report in the
Consoleapp on MacOS, but the error is very cryptic:Excerpt of the error: