fix: Modal ocasionally not focusing properly making input unusable #34853
Conversation
|
Looks like this PR is not ready to merge, because of the following issues:
Please fix the issues and try again If you have any trouble, please check the PR guidelines |
🦋 Changeset detectedLatest commit: 5249ab7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 35 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## develop #34853 +/- ##
========================================
Coverage 59.36% 59.36%
========================================
Files 2819 2819
Lines 67652 67652
Branches 15022 15022
========================================
Hits 40159 40159
Misses 24678 24678
Partials 2815 2815
Flags with carried forward coverage won't be shown. Click here to find out more. |
|
| const inertBooleanSupported = Number(version.split('.')[0]) >= 19; | ||
|
|
||
| /** | ||
| * Before version 19, react JSX treats empty string "" as truthy for inert prop. | ||
| * @see {@link https://stackoverflow.com/questions/72720469} | ||
| * */ | ||
| const isInert = inertBooleanSupported ? (x: boolean) => x : (x: boolean) => (x ? '' : undefined); | ||
|
|
There was a problem hiding this comment.
I believe this will need to be replicated to LayoutSidebarV2. It might be a good idea to have this as an util and use it in both files.
| "@rocket.chat/meteor": patch | ||
| --- | ||
|
|
||
| fixes an issue where opening a modal for the first times renders it's inputs unusable |
There was a problem hiding this comment.
| fixes an issue where opening a modal for the first times renders it's inputs unusable | |
| Fixes an issue where opening a modal for the first times renders it's inputs unusable |
That's a good catch btw. I was wondering which problems we might face with this. I removed "aria-hidden" because aria was throwing errors and removing the prop in some cases. Maybe with both it should be fine... Maybe there's another fix also since this didn't happen in every screen. I'll take a look |
Proposed changes (including videos or screenshots)
Use
inertprop instead ofaria-hiddenfor disabling focus on document when a modal is open.I was only able to notice this issue when trying to save an edited user in the admin page with TOTP enabled. The TOTP modal opens but the input is unaccessible with mouse clicks nor with keyboard navigation
Issue(s)
CORE-908
Steps to test or reproduce
Make sure TOTP is enable and
Enforce password fallbackis enabled aswell (usually both come enabled by default in new workspaces)Admin -> UsersObservations:
*1: By clicking "cancel" and trying again the issue goes away, so refreshing the page is necessary to reproduce the issue multiple times.
You can set
Remember Two Factor for (seconds)to0inAdmin -> Accounts -> Two Factor Authenticationto ensure the TOTP modal appears every time, even if you successfully inputed the code/password.Further comments
I do not know how this change affects screen readers, so some support here would be nice.
Edit: apparently
inertshould have the same effect asaria-hidden, and is supported in every major browser BESIDES IE11. See: https://caniuse.com/?search=inert