fix(modal): do autofocus on content change

[lubber-de]

Description

The autofocus feature does not work when the content of a modal or flyout is loaded/changed after the modal is shown (and contains an input after the change)

Testcase

The content of the modal changes after 3 seconds (and then has got an input

Broken

• new input field is not focussed
  https://jsfiddle.net/lubber/Lzkw5dyq/4/

Fixed

• new input field is focussed
  https://jsfiddle.net/lubber/Lzkw5dyq/18/

Closes

#2490

[mvorisek]

maybe it can be part of refreshInputs, but LGTM

UPDATE: as coded now it will amplify #2476 / #2477 (comment) issues and restore focus on any modal DOM change even if completely unrelated with inputs

I am not sure if it can be fixed easily. IMHO the autoficus on observed change should be set only if:
a) if enabled and no input has focus (as coded now)
b) and the observed (modal) change added a DOM with (visible focusable) input (otherwise there is no point to focus already present input)
c) and the already present (modal) DOM has no (visible focusable) input (otherwise we know autofocus was already done, but user defocused it)

also the #2490 is about tab key trapping, but this PR does not fix it if there is no input in modal to focus

[mvorisek]

@lubber-de please see my updated comment, I do not think the current fix is good

there are 2 separate problems:

1. tab key must be trapped in modal even if there is no input (on show immediately, once only) - [modal] tab key is not trapped on modal open #2490
2. autoficus on observed change - something that this PR tries to solve - see my previous comment

[lubber-de]

1. tab key must be trapped in modal even if there is no input (on show immediately, once only)

I'll do that if autoFocus is true (which it is by default already) otherwise it's a breaking change if we also focus trap when somebody explicitely set autoFocus: false (by whatever reason....)

2. autofocus on observed change - something that this PR tries to solve - see my previous comment

Yes, understood, i am on it

[lubber-de]

I think i covered all mentioned situations now.
@mvorisek If you have time this weekend, i would appreciate, if you can test this

[mvorisek]

I upgraded atk4/ui to Fomantic-UI 2.9.1 and the autofocus is still not fully working, steps to reproduce:

1. open https://dev.agiletoolkit.org/demos/interactive/modal.php
2. click Show (first) button
3. tab key seems to be trapped correctly
4. hide the modal by clicking on the dimmer
5. repeat step 2 - open modal again
6. tab key is not trapped, pressing tab key many times cycle thru the links below the modal

[lubber-de]

I upgraded atk4/ui to Fomantic-UI 2.9.1 and the autofocus is still not fully working, steps to reproduce:

1. open dev.agiletoolkit.org/demos/interactive/modal.php
2. click Show (first) button
3. tab key seems to be trapped correctly
4. hide the modal by clicking on the dimmer
5. repeat step 2 - open modal again
6. tab key is not trapped, pressing tab key many times cycle thru the links below the modal

Should finally be fixed by #2674