Skip to main content
All CollectionsTroubleshooting
Widget fields disabled or blocked
Widget fields disabled or blocked

Unable to type in the widget field. Widget is not working. A modal is stopping the form from working. Browser extension focus issues

Jon avatar
Written by Jon
Updated over 4 months ago

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.

  1. Identify the Modal Component: Find the modal component containing the widget you want to focus on.

  2. Switch off the "trapFocus" Setting: Locate the "trapFocus" setting in the code or configuration and set it to "false."

  3. Test the Changes: Save your changes and test to ensure the widget within the modal can now receive focus.

Alternative library resources


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');
Did this answer your question?