search

palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.74k stars 2.18k forks source link

Form Group helper/label text being selected when using NumericInput inside of dialog #3004

Open tnrich opened 6 years ago

tnrich commented 6 years ago

Here's a gif showing what's going on:

asdf

and a link to the sandbox:

https://codesandbox.io/s/zr52013k03

Can you help me understand why this is happening only within the dialogs and what I should do to prevent this undesired behavior @giladgray ?

Thanks!

giladgray commented 6 years ago

@tnrich i have no idea what would cause this! possibly Dialog autoFocus/enforceFocus props? play with those, see if they have an effect.

tnrich commented 6 years ago

Neither of those in an combination seemed to have any effect on this @giladgray

jonavila commented 6 years ago

Same exact issue for me. Only reproducible in Chrome. Safari and Firefox are fine.

jonavila commented 6 years ago

I think this is related to the CSS rules in .bp3-dialog-container and .bp3-dialog. 

.bp3-dialog-container {
  pointer-events: none;
  user-select: none;
}

.bp3-dialog {
  pointer-events: all;
  user-select: text;
}

When I remove those from the stylesheet, the problem goes away. The problem is that it seems like those were introduced to fix some issues: https://github.com/palantir/blueprint/pull/2756

tnrich commented 6 years ago

@giladgray any thoughts on what @jonavila is saying? Seems like there is probably some workaround that can be implemented so that the dialog closing still functions as expected and user selection isn't wonky?

giladgray commented 6 years ago

@tnrich pretty sure it's the user-select that's causing problems there. try values other than text? perhaps initial or unset (oops i think that's unsupported in IE)?

tnrich commented 6 years ago

@giladgray

I can confirm that adding 

.bp3-dialog {
  user-select: initial !important;
}

does indeed solve the issue with the strange dialog highlighting ( you can see that here: https://codesandbox.io/s/p30vmk4ol0). I'm not sure if this solution causes any regression to the fixes introduced in #2765.

If you can confirm it doesn't, can we change it so that user-select: initial; is the default?

Thanks!

giladgray commented 6 years ago

@tnrich open a PR so we have something to play with? but without the !important

giladgray commented 5 years ago

@tnrich I cannot reproduce this in latest Chrome. Selection does not change. What browser are you using?

in fact, simply upgrading your sandbox link above from 3.0.0-beta to the latest 3.10.0 caused the problem to disappear: https://codesandbox.io/s/m8vmpy6qj.

please confirm this on your end. looks like this issue is safe to close out.

tnrich commented 5 years ago

I can't test this in your example because it doesn't seem to be actually opening in a dialog: image

tnrich commented 5 years ago

Hmm okay I take that back.. It is opening in a dialog it just seems like the css isn't getting loaded: image

tnrich commented 5 years ago

and... no. It isn't working once I add the css back in:

image

tnrich commented 3 years ago

@adidahiya this is still an issue we're seeing on the latest version of blueprint. Would you mind investigating?