plone
Ensure that sidebar field will not steal focus when metadata is edited
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.
Deploy Preview for plone-components canceled.
| Name | Link |
|---|---|
| Latest commit | dfadc5e9d41a6cecad8ec0c10630068bd69ae4ab |
| Latest deploy log | https://app.netlify.com/sites/plone-components/deploys/66752bed09af390008b120c9 |
![netlify[bot] avatar](https://avatars.githubusercontent.com/in/13473?v=4 "Published by a pub.dev verified publisher"){kind=small}
Deploy Preview for volto canceled.
| Name | Link |
|---|---|
| Latest commit | 6f4ce67078c696c4f6fd9df1186f7099e5849f6e |
| Latest deploy log | https://app.netlify.com/sites/volto/deploys/663cca49ce37a0000808bd67 |
@dobri1408 are you sure that this does not break the original intention of the code (https://github.com/plone/volto/issues/4230). Apparently, seems it does not, but still.
@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.
Seems strange passing react props derived from the state of the DOM elements in the browser
@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.
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.
https://github.com/plone/volto/assets/50819975/d5cb58a3-4c39-4335-858e-97cbeac38e58
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
Hello @ichim-david, @tiberiuichim, @sneridagh! I wanted to highlight that the issue is present in every Volto project, including demo.plone.org. This problem is specific to Volto and is not related to the EEA addons. I've added a cypress test and uploaded a video to clearly demonstrate the issue. Could you please review it when you have a moment? Thank you!
https://github.com/plone/volto/assets/50819975/cfadb5b8-b29e-4f4e-a474-485f61d51954
@dobri1408 simply add the test as a new it test here: https://github.com/plone/volto/blob/main/packages/volto/cypress/tests/core/basic/metadata.js there is no need to have a separate file which isn't a .js file and which isn't testing the FileWidget.