[M3] dropdown menu activates when out of focus

Bug Reports
1

It seems like there is a bug in the dropdown menu.

When I open the curtain in the dropdown menu by clicking the icon, the curtain keeps opening/closing on space bar press even when the dropdown menu is no longer in focus.

Try it here: https://genuine-slippery-duck.anvil.app

This is a serious issue when users are to fill in forms, and they are unable to write spaces.

Has anyone found a temporary workaround for this?

2

Thanks for the reproduction - moved to bug reports.
We’ll add these as issues to the m3 github page, so feel free to raise these directly there:

1 Like
3

Thanks, I’ll add it as an issue in the github page.

1 Like
4

Here is a temporary fix you can apply to your dropdowns:

def dropdown_icon_focus_fix(dropdown):
   dropdown.selection_field.dom_nodes['anvil-m3-trailing-icon'].addEventListener(
      'click', _create_icon_click_func(dropdown)
    )

def _create_icon_click_func(dropdown):
  def __icon_click(event):
    dropdown.selection_field.dom_nodes['anvil-m3-textbox'].focus()
  return __icon_click
1 Like