Improve appearance of input focus state while in an input group

[tylersticka]

Because our focus states only happen on inputs themselves, when focusing an input in an input group it looks kinda broken:

---

Thanks @megnotarte

[calebeby]

@tylersticka what does "fixed" look like for this?

• The border on the right side covers the line between the button and the text input
• The border goes the whole way around the combination input/button (I don't prefer this because it might be ambiguous whether the button is focused)
• Something else?

[tylersticka]

My first choice would be for the entire group to be selected. I don't find this ambiguous because if you hit return/enter from the input, it will submit the form. You can see an example for a public client project here: https://cpe-patterns.netlify.app/patterns/elements/forms.html#input-group

Here is a quick mockup:

My second choice would be for the input to remain selected but the focus outline to not be cut off by the button: