edrlab
React Aria Component bug (combobox with search, long text)
add isNonModal={false} on the popover solve the issue 👍
https://github.com/edrlab/thorium-reader/blob/60ebba036c4e8230c5fbd25735a556823b392cee/src/renderer/common/components/ComboBox.tsx#L69
can you please report your findings to the RAC issue tracker?
also, isn't a non-modal pop over problematic for keyboard tab cycling and with respect to the inert background (screen readers)?
Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully.
indeed this could be problematic for a screen reader. According to my tests, tab-cycling is preserved and works in my opinion
https://github.com/adobe/react-spectrum/blob/cf0846eb49fcdde669e9dc4c0c2d2109b50e46dd/packages/%40react-aria/overlays/src/usePopover.ts#L33-L40
/**
* Whether the popover is non-modal, i.e. elements outside the popover may be
* interacted with by assistive technologies.
*
* Most popovers should not use this option as it may negatively impact the screen
* reader experience. Only use with components such as combobox, which are designed
* to handle this situation carefully.
*/
isNonModal?: boolean,
@panaC I reported here based on your findings:
https://github.com/adobe/react-spectrum/issues/5653#issuecomment-2095627190
@panaC apparently isNonModal disables "click outside" handling so this is not a viable solution
I don't think they have cut a release yet...maybe just in time for Thorium3 at the end of this week? https://github.com/adobe/react-spectrum/compare/5548b8925798970db9ffeb1a84049b3afc6bc040...main/
...so, we could close this ourselves by monkey-patching the upstream fix into our node_modules:
// Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
// such as in a combobox. Clicking the dropdown button places focus on the input, and if the
// text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
return;
}
@react-aria/overlays/src/useCloseOnScroll.ts
https://github.com/adobe/react-spectrum/pull/6461/files#diff-6cc4f620ae54059024aaf7231d54536dcdeee1446f18d53b1244700b5d06c8ea