Skip to content

fix(modal,flyout): avoid multiple autofocus on show animation#2674

Merged
lubber-de merged 5 commits intofomantic:developfrom
lubber-de:focustrapdiv
Jan 30, 2023
Merged

fix(modal,flyout): avoid multiple autofocus on show animation#2674
lubber-de merged 5 commits intofomantic:developfrom
lubber-de:focustrapdiv

Conversation

@lubber-de
Copy link
Copy Markdown
Member

@lubber-de lubber-de commented Jan 23, 2023

Description

jquery's focus trigger does not seem to work / detect a non-input element as visible all the time. Although the autofocus is called after the animation has ended a same modal opened a second time (but without input content) does not focus the modal div again, thus focus trap did not work.

This is caused by the new mutationobserver logic fetching class attributes, so the focussing takes place several times, while not necessary when the moda/flyout is animated.

This PR now only observes attributes when the modal/flyout has completed showing as the showing process itself changes class attributes.

Closes

#2575 (comment)

@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug lang/javascript Anything involving JavaScript state/awaiting-reviews Pull requests which are waiting for reviews labels Jan 23, 2023
@lubber-de lubber-de added this to the 2.9.2 milestone Jan 23, 2023
@lubber-de lubber-de changed the title fix(modal,flyout): use native focus to fix non input content fix(modal,flyout): avoid multiple autofocus on show animation Jan 24, 2023
@ivangomes
Copy link
Copy Markdown

ivangomes commented Jan 26, 2023

Somebody, please authorize this pull request.

@lubber-de lubber-de merged commit 5b497e3 into fomantic:develop Jan 30, 2023
@lubber-de lubber-de deleted the focustrapdiv branch January 30, 2023 06:11
@lubber-de lubber-de removed the state/awaiting-reviews Pull requests which are waiting for reviews label Jan 30, 2023
@mvorisek
Copy link
Copy Markdown
Contributor

mvorisek commented Feb 15, 2023

@lubber-de this has introduced another bug, steps to reproduce:

  1. open https://dev.agiletoolkit.org/demos/collection/crud.php
  2. click "Add Country"
  3. write some text using keyboard to "ISO" field
  4. press tab
  5. notice the focus is moved to the 1st field

The problem has been introduced between 2.9.1-beta.36+250ba1e (working as expected, focus is always moved to the next field) and 2.9.1 (has problem as described above).

@lubber-de
Copy link
Copy Markdown
Member Author

lubber-de commented Feb 19, 2023

@mvorisek
Can you please provide a jsfiddle (or adjust the one i posted below) ? I believe there is some additional javascript missing from your website, which i cannot figure out where to copy from.

Here is a jsfiddle where i copied your modal HTML , but unfortunately the issue does not happen there and works as expected. If i enter anything inside the ISO fields and press tab it focuses the next field.

I believe some form validation is missing ?

https://jsfiddle.net/lubber/yn7qjuer/4/

I am already working on fixing search/dropdown components, but in your case its a common text input..
In addition, in your original website, when i change the iso field a second time and press tab it also seems to work as expected.

@lubber-de
Copy link
Copy Markdown
Member Author

@mvorisek I believe your issue is fixed by #2708

@mvorisek
Copy link
Copy Markdown
Contributor

@lubber-de the described issue is the exact duplicate of #2700

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

lang/javascript Anything involving JavaScript type/bug Any issue which is a bug or PR which fixes a bug

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants