Wrapping a TooltipTrigger around a TextField leads to unexpected mouse interactions with the TextField

[brenthosie]

🐛 Bug Report

A few things seem to break when a TextField is wrapped by a TooltipTrigger.

1. You can't double click to select text in the input
2. You can't click and drag to highlight text
3. If you arrow the cursor over within the input, then clicking near the end of the text within the input does not jump the cursor anymore

🤔 Expected Behavior

Maintain default mouse interactions

😯 Current Behavior

1. See slack discussion here
2. See Demo here

This was found because we have a project that's already wrapping a TextField with an OverlayTrigger in v2 (which seems to be working just fine), and we're still doing this in v3 while we wait for official helptext support on fields.

🔦 Context

Our users won't be able to navigate inputs on our forms as they should be able to until this is resolved

Software	Version(s)
react-spectrum	3.7.0
Browser	Chrome
Operating System	Mac Big Sur

🧢 Your Company/Team

1. Adobe Launch
2. Reactor-Sandbox

[devongovett]

Please don't wrap a tooltip around a textfield. Tooltips are meant to be attached to buttons. Tooltips on inputs will likely conflict with many things, including the text editing/copy/paste controls on mobile. My recommendation would be to place a button next to the input (e.g. with an info/error icon) to show your tooltip.

[brenthosie]

Is there a spectrum design standard for this recommendation? An error icon next to a text input that displays the error?

The current way we've implemented errors considering this is not available in React Spectrum V3 is to try and call attention directly to the field as outlined here.

[devongovett]

Help text support being worked on currently by a contributor, and tracked here: #1346. In the mean time, it seems fairly straightforward to me to put a <span color="var(--spectrum-semantic-negative-color-text-small);">Error here</span>. Does that work for you?

[brenthosie]

Based on the slack discussion it sounds like error messaging isn't meant to go outside of the bounds of the TextField component. This would imply that we'd have to write more than a simple span to get the text associated with the rendering bounds of the field.

Can wrapping the TextField with a tooltip not be considered as a bug per the suggested discussion from Mr. Jordan?

[devongovett]

Based on the slack discussion it sounds like error messaging isn't meant to go outside of the bounds of the TextField component.

Not exactly sure what this means. I assume you mean it should have the same width as the textfield. That seems pretty easy to do with a flex wrapper.

I don't think it's a bug technically because text fields aren't meant to have tooltips in the first place.

[devongovett]

I'm going to close this issue. We brought this up with the Spectrum design team today and determined that tooltips on a textfield are not something we will support. Aside from the other issues related to the design (I believe Spectrum suggested using a form), help text is the proper way to show errors on fields, not tooltips. As I've said this is currently in progress, but it should be fairly easy for you to do yourself in the meantime if you need something immediately.

Here's an example: https://codesandbox.io/s/compassionate-frost-kxhy7?file=/src/App.js