Unexpected keyboard focus ring on SearchField, TextField components if they have height set

[briluu]

🐛 Bug Report

If you set, say minHeight, on a SearchField, when SearchField is focused via keyboard it will include focusing the div in addition to the input element.

🤔 Expected Behavior

We expect to only see the focus ring on the input element itself.

😯 Current Behavior

We are seeing two focus rings, one around input and one around the div.

🔦 Context

We have some usages of the SearchField set with a minHeight in our product so when we keyboard tab into it, we noticed the double focus ring.

💻 Code Sample

https://codesandbox.io/s/loving-sea-vr2df2?file=/src/App.js

🌍 Your Environment

Software	Version(s)
react-spectrum	3.23.0
Browser	Reproduced in Chrome, Firefox
Operating System	MacOS

🧢 Your Company/Team

Adobe Administration UIs

[snowystinger]

I wouldn't advise putting a minHeight on a textfield, it doesn't make much sense. In fact, we should probably remove that prop. This could happen in a Flex still though, so there might still be something we could do to address the odd rendering as well.

Seems like you need more control over the rendering than our form fields currently allow if you’re specifying all the extra elements

You can get this kind of control by re-composing the component like so (rough sketch) https://codesandbox.io/s/zen-feynman-9hrumk?file=/src/App.js

Might be good for us to consider making Label an official component as well as the HelpText underneath so people can compose these in situations like this where a button needs to be in line with the input