Modal focus issue: when the first focusable item is hidden, it gets disabled, and still disabled when it is visible.

[JBismonte]

Describe the bug
this is a regression caused by #5875
We have a specific component in Landmark client that is a hidden input besides a p-tag. the p-tag element is tabbable so that when the ptag is focused, it will make the input visible and it will focus to that input instead. the issue here is that the input is getting disabled.

I have found a much more simpler way to reproduce it here
#6086 (comment)

To Reproduce

in the enterprise-ng repository, extract the following files in modal-dialog.zip
here enterprise-ng\src\app\modal-dialog

Steps to reproduce the behavior:

1. on enterprise-ng Go to http://localhost:4200/ids-enterprise-ng-demo/modal-dialog
2. Click on the "Full on Tablet" button
3. the field that is getting focused is disabled.

Expected behavior
when the hidden field is getting visible, it should not be disabled.

Version

• ids-enterprise: 4.59.2

Screenshots
See attached screen recording.
https://user-images.githubusercontent.com/29673378/152195892-4db2b79d-8814-4989-bcb3-8e9ba734c796.mp4

Platform

• Infor Application/Team Name: Landmark Client
• Device: (if applicable) : NA
• OS Version: Windows 10
• Browser Name: Firefox
• Browser Version: 96.0.3

Additional context
Add any other context about the problem here.
https://jira.lawson.com/browse/LMCLIENT-38382

[tmcconechy]

@ericangeles found one more case of this.. can you have another look

[JBismonte]

I have found a simpler use case,

so there is a hidden field initially, and a button to make it visible, when you click a button to make the hidden field visible. the field is disabled.

here is the zip file, paste it into the modal-dialog folder in enterprise-ng
modal-dialog.zip

here is the screen recording of the issue.
https://user-images.githubusercontent.com/29673378/152198881-81535e5f-5d2a-4339-a819-8625ef035240.mp4

[tmcconechy]

@ericangeles i made an easier example for you and pushed to http://localhost:4000/components/modal/test-toggle-disabled.html

• open the modal and click the test button -> notice the field is still disabled.

What im not sure of is what would break if i change this https://github.com/infor-design/enterprise/pull/6034/files#diff-698a07032aec8fd0476d3d4d11834f24dfa87f31dcb77e529eb9d01fd1d42326R1046 so letting you have a look. Maybe we shouldnt be auto setting any states?

A workaround seems to be removing the disabled attribute when you make the field visible.

[jbrcna]

this is now working as expected. However, the below step is not reflected yet. will retest once merged. thanks

1. Use Shift + Tab to focus the input. Focus should not escape the modal, should skip the hidden input, and should be placed on the last element inside the Modal (in this case, the Save button)

v4.60.0-dev
https://main-enterprise.demo.design.infor.com/components/modal/test-toggle-disabled.html

https://main-enterprise.demo.design.infor.com/components/modal/example-hidden-field.html

[tmcconechy]

@jbrcna i think the problem ls the button i added doesnt have. focus state should be ok on next merge now

[CindyMercadoReyes]

Good day all,
I'm moving this ticket to QA failed because the tab feature is not working correctly for the "Problem" field box (Video of issue included in this ticket). Steps to reproduce below:
1- Go to URL: https://main-enterprise.demo.design.infor.com/components/modal/example-hidden-field.html on both MAC FF and MAC Chrome
2- Click on "Show Modal (Suppressed Enter)
3- When using tab key on Chrome it tabs into the "Problem" field box. When you follow the same steps on FF is tab is not focus on the "Problem" field box. It skips its.
4- Please see videos of the issue below

• https://www.screencast.com/t/pNs7Ea3Wcs
• https://www.screencast.com/t/MnlBCG9gY

[JBismonte]

Hi, just tested also in lmclient, the disabled input has been fixed, but there is a regression, the focus is getting trapped, the files to reproduce in enterprise-ng is here. in my example, when the text is focused, it should make the input field visible and should focus on the input field instead.

This was maybe caused by tabindex attribute, because both enterprise and also lmclient set the tabindex of some of the elements.

here are the recordings of the expected behavior and the current behavior inside the modal.

expected behavior
https://user-images.githubusercontent.com/29673378/152728803-b98b99b6-7227-445a-afe9-fcaffb7848c7.mp4

current behavior
https://user-images.githubusercontent.com/29673378/152728819-c5c6078f-6415-406d-8cb9-d2763caa802f.mp4

here is the file used to reproduce in enterprise-ng, to be inside enterprise-ng\src\app\modal-dialog\ directory.
modal-dialog.zip

Then go to: http://localhost:4200/ids-enterprise-ng-demo/modal-dialog

[tmcconechy]

@CindyMercadoReyes seems to have found something similar.... But concerning @JBismonte findings how do we reproduce that seems like the "files to reproduce" are missing. Looks a bit weird because of hiding and showing the fields on focus or something?

[JBismonte]

Hi, @tmcconechy, here are the links to the files I made to reproduce. https://github.com/infor-design/enterprise/files/8012581/modal-dialog.zip and here is the path where they should be pasted. enterprise-ng\src\app\modal-dialog\ . and you can access it with this url: http://localhost:4200/ids-enterprise-ng-demo/modal-dialog

Yeah, the behavior we have on lmclient is that there are p tags, which are fields in preview mode, so when we focus on that p tag via keyboard or mouse, it will display the input fields and hide the p tags, and when the input fields lost focus, it will hide the input fields and display the p tags.

[tmcconechy]

@EdwardCoyle are you able to take another look?

[jbrcna]

working as expected. v4.60.0-beta1
https://main-enterprise.demo.design.infor.com/components/modal/example-hidden-field.html