[dashboard] Inconsistent state if editable is removed while widget is focused

[DiegoCardoso]

Description

If the editable attribute is changed while some widget is focused, you can end up in an unexpected state where the widget remains focused/editable:

https://github.com/user-attachments/assets/d8c1a322-56e1-4124-a9a9-ce9dc7888578

Expected outcome

I would expect that after that the editable attribute is removed, that the widgets wouldn't be allowed to move/resize and their focused state would be removed as well.

Minimal reproducible example

Change the dashboard-item-moved event callback in the dev/dashboard.html page to add dashboard.editable = false

Steps to reproduce

1. Add the snippet in the dev/dashboard.html
2. Focus in the first widget
3. Enter in the move mode
4. Move the widget

Environment

OS: N/A

Browsers

No response

[yuriy-fix]

Not sure what is happening in the video. Could you please clarify it?

[DiegoCardoso]

This is what is happening in the video:

1. The dashboard element is in the editable mode
2. User focuses in one widget and enters the move-mode (hits Enter twice)
3. editable mode is disabled in the dashboard (for instance, in one listener for the dashboard-item-moved event, a call to dasboard.editable = false is done)

After these few steps, you can see that the widget remains in the move-mode although the dashboard as a whole is not editable anymore. Also, note that I can still move the widget around in this scenario.

Something I just noticed is that if on step (2) I only focus, hit Enter and use the arrow keys to move, then the focus ring is stuck and I can't move the focus with Tab and the console shows the following error:

focus-trap-controller.js:150 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')
    at FocusTrapController.__focusNextElement (focus-trap-controller.js:150:13)
    at FocusTrapController.__onKeyDown (focus-trap-controller.js:129:12)