Missing placeholder & iOS focus issue on Pro Forms "Modern Select"

Bug Reports
1

When using Modern Select (Choices.js) with the “Searchable” option enabled, the search input field (.choices__input) within the dropdown menu does not have a placeholder attribute. Additionally, attempting to trigger the keyboard via programmatically setting focus on the dynamically inserted search input field fails due to WebKit’s User Activation Policy.

2

Hi,

thanks for the precise report - I could confirm both points in the code.

  1. Placeholder: we initialise Choices.js without the searchPlaceholderValue option, and for a single select Choices sets the search input’s placeholder to exactly that value (empty if nothing is passed). There is also no control for it yet. Multi-selects are unaffected, because there Choices reuses the field placeholder.

  2. iOS focus: both focus calls happen after the tap has been processed - ours in a 25 ms setTimeout, Choices’ own inside a requestAnimationFrame. WebKit then no longer counts it as a user activation, so the keyboard stays down. Calling focus() from outside won’t help either: it has to run synchronously inside the tap handler, and the dropdown is visibility: hidden until it opens.

As an interim workaround for the placeholder - every instance is kept in window.bricksforgeData.choicesInstances:

window.addEventListener(“load”, () => {
(window.bricksforgeData?.choicesInstances || ).forEach((instance) => {
instance.input.element.placeholder = “Search…”;
});
});

Both points are noted internally so we can address them in the plugin.

Kind regards
Daniele

3

Thanks for the quick response! :slight_smile:

1 Like