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

Created on 17 Nov 2019  路  5Comments  路  Source: palantir/blueprint

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?

P2 bug

Most helpful comment

@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)

All 5 comments

This is a duplicate of #3845 but contains more information

@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)

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 馃槙

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

@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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

tgreenwatts picture tgreenwatts  路  3Comments

westrem picture westrem  路  3Comments

havesomeleeway picture havesomeleeway  路  3Comments

sighrobot picture sighrobot  路  3Comments

ghost picture ghost  路  3Comments