Polaris webcomponents won't focus after modal opened

Polaris
1

Strange issue where input components won’t focus after a modal is opened.

Occurs both in embedded up and on standalone webpage.

Modal launch button remains in focus, hitting the space bar will execute a click action on the button.

Occurs on multiple browsers (i’ve only tested on chrome, android chrome, edge and occurs on all 3)

video of behaviour: https://www.loom.com/share/162c4a32591445c3bb19ebc9a1bb89da

link to page: https://minzliu.net/bugPolaris.html

it’s a bit strange though as it depends on a specific combination of web components, i was able to reproduce this with just a single text box but then it stopped exhibiting the behaviour, with the link above, removing any more input boxes seems to stop the behaviour too.

2

Your HTML example works for me, I can open the modal, close it and focus the text input

3

may i ask what browser you’re using? i’ve been able to reproduce this on multiple computers as well.

4

Chrome. I did try it in brave just now and had your issue, but I updated the browser and relaunched without the issue. Maybe something they changed made it break in older versions?

5

hmm i’m running the latest chrome and still can reproduce, Version 144.0.7559.133 (Official Build) (64-bit).

i just tested in firefox and works fine there.

6

Hmm yeah I’m also unable to reproduce. If we can get to a place where we reliably reproduce this, that’ll help a ton.

7

I can actually reliably reproduce it on chome by refreshing the page with a clear cache in dev mode (Empty Cache and Hard Reload), then click the modal right away. After doing that you cannot select the text components on the actual page just like in the video.

8

Hi Anthony,

any chance you were able to reproduce this in the end? This occurs for me regardless if i have dev mode enabled or not or if cache is cleared or not. As long as after modal is open, the focus remains on the open modal button, so after the modal is opened and closed, clicking on the dropdown select will open and immediately close it (focus should be on the dropdown select however forces back onto the open modal button), if you hit space bar, this opens the modal again which is has the focus.

9

I was able to replicate this issue on https://minzliu.net/bugPolaris.html
The key is to select an option in the dropdown using the keyboard instead of the mouse.

Exact steps to replicate consistently:

  1. Open dropdown
  2. Use keyboard to select a value e.g. 3 + enter keys (edit: no enter key)
  3. Open modal
  4. Close modal
  5. Try to reopen dropdown and notice that it automatically closes

I’ll share my findings with @Anthony_Frehner to get this addressed :slight_smile:

1 Like
10

@Min_Liu Are the replication steps slightly different for other browsers? I have only been able to replicate on Chrome.

11

@Paige-Shopify

I think the replication steps are slightly different for everyone based on the feedback, but i’m observing the issue on chrome (both mobile and PC) and edge, firefox seems to work fine and no access to safari.

12

I just tested this on Edge as well, and I can confirm I’m seeing the same issue there.

Thanks for flagging this. We can’t share an estimated timeline right now, but we’ll post an update here once it’s resolved.

13

We have a fix incoming for this!

Bug was, an already hidden modal was being asked to hide again and the code that focuses the activator button was called before the guard to not close an already closed modal. :sweat_smile:

We’ve added tests. Verified a fix. Will report back when deployed.

Thank you for the bug report.

2 Likes