igniteui-dockmanager icon indicating copy to clipboard operation
igniteui-dockmanager copied to clipboard

Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

Open SC-Serhii-Litvinov opened this issue 8 months ago • 4 comments

Description

Error appears in a console during pane closing image

  • version: 1.14.3
  • browser: Edge

Steps to reproduce

We have a requirement to allow user confirm or decline pane closing. To to achieve this we subscribe to paneClose event and do call e.preventDefault().

After confirmation received we remove the pane. However if you click fast enough to thing will happen. Note not all panes will require confirmation, some will just close without any additional user interaction. It' s impossible upfront to distingue between such panes. So prevent preventDefault is called for all panes.

  1. Open few content panes
  2. All panes should be closed without requiring user interaction
  3. Try click on a pane after close button was pressed.
  4. Observe the error in the console

image The cause of an issue is code inside requestAnimationFrame. contentPanesElementMap no longer contains requested pane. The pane had already been closed.

UPDATE[17.06.2024] Sample application had been created to reproduce. In total there are three errors in this flow:

  1. handlePaneHeaderMouseDown: Cannot read properties of undefined (reading 'focus')
  2. closePane: Cannot read properties of undefined (reading 'type')
  3. bringFloatingPaneOnTop: TypeError: floatingPanes is not iterable It feels like all errors do have the same root cause

Note: in order to reproduce timing should be just right. Might not happen from the first attempt 2024-06-17_16-49-15

To reproduce: try closing Floating Pane via double clicking close button. Sample application link

Result

Uncaught TypeError: Cannot read properties of undefined (reading 'focus')

Expected result

The panel closed without errors in the console

SC-Serhii-Litvinov avatar Jun 12 '24 07:06 SC-Serhii-Litvinov