Blueprint: Input on [Labs/Select] Un-focusable when in a Dialog

[patrickdevivo]

Bug report

• __Package version(s)__:
  "@blueprintjs/labs": "^0.10.0"
"@blueprintjs/core": "1.28.0"

• __Browser and OS versions__:
  Chrome: Version 60.0.3112.113 (Official Build) (64-bit)
  macOS 10.12.6

Steps to reproduce

1. Render a Select component from @blueprintjs/labs in the body of a Dialog
2. Try to focus the input field (filterable = true)

Actual behavior

The input field is not able to be focused. Clicks on it won't focus, nor will "tabbing" to it. I believe it's because both Select and Dialog use an overlay, and one overlay is blocking events for the other (Dialog blocking Select)

Expected behavior

The filter input field is focusable

[cmslewis]

Interesting.

// FYI @giladgray ^

[patrickdevivo]

I can give it a shot if there's trouble reproducing.

The code I had written which contained this bug has been refactored, so I no longer have a "working" copy of the bug.

[giladgray]

@patrickdevivo have you tried setting autoFocus={false} and/or enforceFocus={false} on the Dialog? it is likely one or both of those props is interfering with your desired focus behavior.

[patrickdevivo]

@giladgray that could very well be the case. I did not try setting those props. Unfortunately, it's not as trivial for me to test that as a fix, since the feature this code was driving has been modified enough that this bug is no longer relevant to it.

I can spin up a simple test to try to reproduce and then hopefully close this issue accordingly if setting the prop types fixes it

[giladgray]

@patrickdevivo would be great if you could attempt a repro and update or close this issue. Thanks!

[jamesross3]

hit this issue with rendering a bp-labs select within a dialog; @giladgray's suggestion (enforceFocus: false as a Dialog prop) worked for me. Another thing that worked for me was passing popoverProps={{inline: true}} into the Select component.