Ensure that sidebar field will not steal focus when metadata is edited

[dobri1408]

When editing metadata externally, as in the case of our EEA metadata block, the current functionality causes the sidebar to automatically gain focus. However, this behavior is unnecessary in this context and results in the sidebar capturing focus inappropriately. To address this, I propose a solution where the sidebar will only receive focus if the user is actively working within it. This can be achieved by checking the activeElement to determine if the sidebar should be focused.

screen-capture.webm

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	6f4ce67
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/663cca490903740008f5023e

[netlify]

✅ Deploy Preview for volto canceled.

Name	Link
🔨 Latest commit	6f4ce67
🔍 Latest deploy log	https://app.netlify.com/sites/volto/deploys/663cca49ce37a0000808bd67

[sneridagh]

@dobri1408 are you sure that this does not break the original intention of the code (#4230). Apparently, seems it does not, but still.

[dobri1408]

@sneridagh, @tiberiuichim @ichim-david , I believe there might be a misunderstanding. Consider this perspective: the field in question is displayed in the sidebar, as indicated by the className being sidebar-metadata. Therefore, if we are not operating within the sidebar context, it seems unnecessary to focus on these fields. Also it can be a potential bug, as I have shown you. My condition ensures we check whether we are in the sidebar or not.

[sneridagh]

LGTM, although I'd like to have feedback from David and Tiberiu.

[tiberiuichim]

Seems strange passing react props derived from the state of the DOM elements in the browser

[ichim-david]

@sneridagh I'm putting the pull request in draft until we have a better look at the problem and consider if we need to handle it from Volto core.
This is a problem of our doing within our add-on https://github.com/eea/volto-metadata-block/ that allows you to mirror the content type fields from the sidebar to the content area. Because it renders with the same id and widget when there is a field with a react-select and given the field id it focuses on the sidebar which is bad if you interact with the widget in the content area.

Given Tiberiu's comment even if we do propose something for the core we might need todo it differently so for now we treat it as review given and we still have some work todo.

[dobri1408]

After conducting research and consulting with my colleagues, we have concluded that the focus management approach used by the Select Widget is incorrect. As demonstrated in the attached video, the issue does not originate from our metadata-section-block.

The problem originates from this particular pull request: https://github.com/plone/volto/pull/4003/files#diff-e739dae43ff2e2a3a433411ca92aa574aa0502d440e3734905df9e1b96522ebfR318

My solution, as outlined in this pull request, addresses all these issues. I suggest we reconsider this approach and possibly enhance it if it doesn't meet your expectations.

screen-capture.1.mp4

We've had this bug for quite some time. As you can see here, we were forced to implement customizations because of it: https://github.com/eea/volto-cca-policy/tree/master/src/customizations/volto/components/manage/Widgets