Select Element Not Working Properly

Chrome
Version 108.0.5359.71 (Official Build) (arm64)

This issue first detected doing this

  1. Add a select element

  2. Add a plot where the plot is using the select element

  3. The select element opens

  4. Move the select element in a cell after the plot

  5. The select element does not open.

This was working up until a few days ago.

Default Reproduction in existing Notebook does not work

  1. Add a default select element from the cell menu after the plot
  2. Leave default values
  3. The select element will not open

Default Reproduction in a new Notebook works

  1. Add a default select element from the cell menu
  2. Leave default values
  3. The select element will open

Discussion

Playing around with which cell I place the select in sometimes gets the select to work, sometimes does not.

  1. In all failure cases, the select does not open at all.
  2. The select element will accept the focus.
  3. When the element is inspected in developer tools, all the options are there and valid.

More issue reproduction

  1. From the Observable main site
  2. Learn → Documentation → Introduction to Inputs
  3. Click on the select element here and it will not open.

I have tried this on my primary laptop as well as a completely fresh laptop where I installed Chrome to test this. And yes the Intro to Inputs select element does not open.

All of these examples including the original notebook work on Safari.

Have not tried Firefox

Tested on

MacOS: 12.3
MacBook Pro M1 Pro
Chrome Version 108.0.5359.71 (Official Build) (arm64)

MacOS: 12.3
MacBook Pro Intel
Cleaned and wiped laptop

MacOS: 13.0
MacBook Pro Intel
Upgraded from the above.

Hi @JohnH, thanks for your report! Unfortunately I have a bit of trouble following your description. Could you perhaps add a short screen recording that demonstrates the behavior that you describe?

Hello,

I have attached a screen recording of the select not working. Whether I manually cut and paste the select defining cell or use the arrows to move the cell results in the same condition. The select works above the plot and does not below the plot. I have another copy of the notebook where the select no longer works above or below the plot. Not sure what to make of that.

Sorry to respond via email rather than replying through the “Talk” but I got an error when I tried to attach anything, saying something about new users can’t attach files.

Also sorry for the length also. Hard to describe really fast.

Thanks

John

(Attachment SelectError1.mov is missing)

Hello,

I have attached a screen recording of the select not working. Whether I manually cut and paste the select defining cell or use the arrows to move the cell results in the same condition. The select works above the plot and does not below the plot. I have another copy of the notebook where the select no longer works above or below the plot. Not sure what to make of that.

Sorry to respond via email rather than replying through the “Talk” but I got an error when I tried to attach anything, saying something about new users can’t attach files.

Also sorry for the length also. Hard to describe really fast.

Thanks

John

(Attachment SelectError1_AdobeExpress.mp4 is missing)

Hello,

I have attached a screen recording of the select not working. Whether I manually cut and paste the select defining cell or use the arrows to move the cell results in the same condition. The select works above the plot and does not below the plot. I have another copy of the notebook where the select no longer works above or below the plot. Not sure what to make of that.

Sorry to respond via email rather than replying through the “Talk” but I got an error when I tried to attach anything, saying something about new users can’t attach files.

Thanks

John

Thank you for the detailed demonstration, and for fighting with the forum’s spam protection! :sweat_smile:

I can reproduce the problem in Chrome 108 (not in 107 though). When a select element is below a certain height it can still be focused, but no longer opens.

This seems to be a bug in Chrome (which hopefully will get fixed soon), but I’ll see if there’s anything we can do on our end to mitigate it.

I’ll update here as soon as I know more. Again, thanks for reporting!

Here is the Chromium issue: Issue 1395079: Version 108 breaks html select behavior

It’s been marked as priority 1. Hopefully we can expect a fix to be released within the day.

Cool! Glad to know I wasn’t crazy. Too many moving parts. Thanks for your response.

Observable is awesome!!! And I want it to succeed. The potential is unbounded.

2 Likes

Here is an example notebook to test this issue.

https://observablehq.com/d/4d017cc413bc8d69

Depending on the height of your current browser window, the select fails to open passed a particular cell.

So if all the cells are pinned and the current browser window is open to a height of 800px, select10 and select11 should not open. Decrease the window height and even fewer selects will open. This will be a big issue if the user is on a smaller screen or opens their browser with a smaller height.

For now any notebooks using selects will have to make sure to define the selects within the ~400-500px of height. Not a lot of space and easy to go passed it if you have a series of vis, a Table view, or the Wrangler.

Latest update from the Chromium issue:

Sorry for the disruption this is causing.

I’ve managed to reproduce and found the bug. I should have a fix landed by tomorrow.

1 Like

Reposting the following link for reference

https://bugs.chromium.org/p/chromium/issues/detail?id=1395079

describes where the Chromium team is now including a link to download a dev build of Chrome.

However, it is not clear when they will be releasing it. Might not be until next week.

The Chrome team has published an update containing the bugfix.

Awesome!! Select works again!!