Input for filtering a Select component can not be used if the Select is inside a Drawer

[pdiazdumont]

Environment

• Package version(s): @blueprintjs/core: 3.17.2 / @blueprintjs/select: 3.11.2
• Browser and OS versions: Google Chrome 78.0.3904.97 / Windows 10 Pro

Code Sandbox with the issue https://codesandbox.io/s/blueprint-sandbox-2o2rt

Steps to reproduce

1. Install @blueprintjs/core: 3.17.2 and create a basic select inside a drawer
2. Run the application / open the sandbox
3. A drawer will open an inside of it there will be a Select component with the filter option enabled
4. Click on the text input to filter some values

Actual behavior

The input text field can not be clicked (or focused) and no characters appear when writing.

Expected behavior

The input text field can be clicked and characters can be typed.

Possible solution

I've done some testing, this is a bug for 3.17.2, after updating to 3.20.0 the issue was solved.

Note: after upgrading to 3.20.0, a clean installation is required (deleting the node_modules folder and deleting the package-lock.json file) otherwise the issue will still be present, this may be a caching issue on npm (?)

Question: 3.17.2 seems to be the latest published version but 3.20.0 is also available and was published earlier, is this intentional? when will 3.20.0 be launched as the latest stable release?

[pdiazdumont]

This is a duplicate of #3845 but contains more information

[rafaellichen]

@pdiazdumont I think this issue is related to the parent component having enforceFocus as true. I had the same issue with using Dialog, but I solved it by setting enforceFocus to false for the Dialog component. (Related to #1612)

[giladgray]

yes enforceFocus with nested Overlays (select's Popover inside a Drawer) is the cause here. enforceFocus={false} is correct. i wish this had been the default 😕

[adidahiya]

@giladgray do you think the default for all Overlay components should be enforceFocus={false}?

[giladgray]

@adidahiya wooo first @-question in 18 months! i would say yes, but even more important is autoFocus={false} which wrecks popover submenus and dropdowns. i often disable it myself immediately because bringing the focus into the overlay is more destructive than trapping it there (enforceFocus) once focus moves inside.

[squarewave24]

having the same problem.

Select2 within a drawer, and input box is non responsive. sometimes i'll see a few characters get in, but mostly nothing happens when i type.

tried disabling enforceFocus but it's not having any impact

      <Select2<Instrument>
        items={instruments}
        itemPredicate={filterSession}
        itemRenderer={renderSession}
        itemListRenderer={itemListRenderer}
        onItemSelect={onSelect}

        popoverProps={{
          enforceFocus: false,
          minimal: true,
          popoverClassName: "multi-select",
        }}