Working with modal elements in libraries like Material-UI can sometimes lead to focus issues, where users are unable to interact with the Widget or forms inside the modal.
These issues arise from a feature called "focus trapping," which confines user focus within the active modal element.
Due to the high number of UI libraries, we are unable to document all of them however, the setting is usually named similarly.
Example: Solve Focus Issues in Material-UI
The steps below will guide you through enabling focus on forms.
Identify the Modal Component: Find the modal component containing the widget you want to focus on.
Switch off the "trapFocus" Setting: Locate the "trapFocus" setting in the code or configuration and set it to "false."
Test the Changes: Save your changes and test to ensure the widget within the modal can now receive focus.
Alternative library resources
Material-UI Issue: GitHub repository
Material-UI API Documentation: trapFocus details
VuetifyJs: VuetifyJs documentation (if using libraries other than Material-UI)
Focus issues when using the Browser extension
When using Bootstrap Modals, Bootstrap forces your mouse and keyboard to focus on an open modal meaning when you try to type somewhere else, Bootstrap will move your focus back into the modal.
This will stop you from being able to fill in and complete the Userback widget form fields.
When the Userback widget code is used, we detect the use of Bootstrap and stop this default behavior.
When using the Userback browser extension, this behavior can't be stopped because the browser extension runs in a separate environment.
In order to fix this, you will need to turn off the default behavior by running the code below in Bootstrap:
$ (document).off('focusin.bs.modal');