Picker - ExpandableOverlay imperativeCloseExpandable

[adids1221]

Description

Picker when passing onDismiss from customPickerProps the onDismiss getting called twice. Fix new imperativeCloseExpandable function to pass to Modal as onDismiss instead of going into closeExpandable from the Picker and from the Modal Snippet: (This issue occurs both on Modal and Dialog)

 <Picker
        placeholder="Favorite Language"
        value={language}
        onChange={item => setLanguage(item)}
        items={options}
        customPickerProps={{
          modalProps: {
            onDismiss: () => console.log('dismissed')
          }
        }}
      />

Implemented a state machine pattern to track the component's dismiss state. Also fixed TODO task in Picker test.

Changelog

ExpandableOverlay internal usage of Modal onDismiss fix.

Additional Info

MADS-4656

[adids1221]

@M-i-k-e-l do you remember where did we used the imperativeCloseExpandable ? was it the toggleExpandable or the useImperativeHandle ?

[M-i-k-e-l]

@M-i-k-e-l do you remember where did we used the imperativeCloseExpandable ? was it the toggleExpandable or the useImperativeHandle ?

@adids1221 The changes were in ExpandableOverlay. But it means all usages of the component needs to be tested (including private).

[adids1221]

@M-i-k-e-l do you remember where did we used the imperativeCloseExpandable ? was it the toggleExpandable or the useImperativeHandle ?

@adids1221 The changes were in ExpandableOverlay. But it means all usages of the component needs to be tested (including private).

I meant where in ExpandableOverlay, I think we changed the onDismiss props of the Modal and Dialog. checking it.

[M-i-k-e-l]

@adids1221 This still has the old attempt

[M-i-k-e-l]

Didn't we need to talk about this? Or debug together?

[adids1221]

@M-i-k-e-l we spoke about it, you passed the imperativeHandle to the toggleExpandable but it's still calling onDismiss twice. I'll set us another meeting about that.

[M-i-k-e-l]

@adids1221 the solution we've talked about is working correctly on iOS but not on Android (no onDismiss there).

1. Please rename the function.
2. Did you test it with screenreader? Is the focusAccessibility working correctly?

[adids1221]

@M-i-k-e-l Iv'e checked it on my device with screenreader. focusAccessibility should be part of both imperativeCloseExpandable and closeExpandable. closeExpandable is getting called by Dialog and it's working as expected. But when when using imperativeCloseExpandable from Dialog the test says the onDismiss isn't getting called.

Sumup: Modal should use imperativeCloseExpandable, Dialog closeExpandable and both of them should have focusAccessibility.

Let's sync about it

[adids1221]

@M-i-k-e-l iv'e checked accessibility both on IOS and Android, working fine for me. I noticed something in IOS that the Modal.TopBar rendered even if it's empty (but only IOS I guess something on my device).

[adids1221]

Moved to draft. TODO: check in all the components that are using ExpendableOverlay