Clear search icon in <sp-textfield>

Is there any way to add a clear icon on the right side of an sp-textfield of type=“search”, like Photoshop has in it’s own search? (see attached screenshot)

I tried manually adding and positioning an sp-icon but the sp-textfield input component is always displayed on top of the icon, hiding it.

It has to be outside of it.

Maybe after 4 hours of hard trying you could workaround it with popover element. That is also special component with infinity z-index as well and I think it can have infinity+1 meanwhile textfield will have only infinity.

@Jarda I read popover so in uxp you can use, if so, can you give an example. Thank you

Thanks for the replies, I experimented with popover a bit but couldn’t get it to work. Too bad, there is a validation icon/component that uses the right side of the sp-textfield. It would be nice if this was exposed as a slot to customize.

This is example… but it is not very useful alchemist/src/inspector/components/AccDrop/AccDrop.tsx at dev2 · jardicc/alchemist · GitHub if you dig into… it could be still waste of time. I will not spend more time with it.

I mean if you set open=true and never change it… I think you could have something with custom content above spectrum element.

1 Like

What you’re running into is the infamous and unsolved issue of z-ordering limitation because of which the text always overlays any other element. This is still unsolved because it’s almost impossible and horribly non-performant to address this. We’re working on supporting the <sp-search> element with UXP v8.0 which has the feature that you’re looking for.



Yeah sp-search would be great, do you also regularely update version support for SWC components like sp-card? Would really love one of the newer card versions that has the action menu slot.

In general it would be helpful with some sort of timeline of what is planned.

Yes, we’re planning to move all the currently supported SWC components to v0.37 with UXP v8.0 and add support for components like overlay, search, meter, number-field, and picker. This would possibly land in Photoshop and other products around April/May but don’t quote me on that!

1 Like