Combobox Insert-after button padding

[seanmateer]

Hey Dsys,

We are implementing a combobox with a search/autocomplete function just like this example in doc. Myself and some on our team had the expectation that the entire "insert-after" grey box would be a click target when there is an action-handling icon within it. It's a subtle difference in the click target size, but actually led to confusion a few times when testing implementation because we weren't realizing we were missing the icon click target and were confused to see no response. When hovering just off of the actionable icon, but still over the grey box, you can also see the cursor icon, but it doesn't actually focus the field unless you click in the "white" part of the combobox.

Quick video example (sorry for the wobbly phone edit - screen recorder was acting nuts 😅)
https://user-images.githubusercontent.com/4806849/111706958-d6375b00-8808-11eb-95cc-5c8eabb79cf3.MOV

Just some thoughts for your consideration - thanks!

CC @productdana

[TheSisb]

Hi @seanmateer,

That's a good observation and I can see how that may lead to confusion. The tricky part is that folks may pass in anything into the insertAfter prop, which means it could be two actionable elements. If we defaulted to having one main click target that would prevent that functionality. I'll share this with the team so we can discuss solutions and get back to you.

[seanmateer]

Thanks for the context and reply! One thought was - can the implementer somehow have control over the margin/padding of the insert-after element, or something so they could artificially modify the size of click-target if necessary? (Not sure the feasibility). Will let y'all discuss - appreciate the response!

[TheSisb]

Hey @seanmateer,
I haven't tried it out, but my concern with that approach is that by removing the default margin, the placement of the inner button will be incorrect unless folks pass in the correct padding in their component. This can be error prone/inconsistent and potentially a worse developer experience than alternative solutions. I've made a ticket in our backlog to look into this (https://issues.corp.twilio.com/browse/DSYS-2730) and we will report back with updates as we have them.

[loreina]

👋 Hi there,

We now have autocomplete single-select Comboboz and Multi-select Combobox is autocomplete by default. We also have it in our backlog to add an icon button to clear the selection in the near future.

Closing this due to inactivity. Feel free to comment in this discussion if there's anything our team can help with. Thanks!