Request enhancement to add a searchable component to the editable label group

[imjoyjean]

Requesting new features, enhancements, or design changes to PatternFly

• Describe the use cases and requirements of the new feature or enhancement you are requesting. Enable search when editing a label

• Explain why this feature is needed and/or why these requirements cannot be met using existing components. Our product is planning to use this when editing or creating new labels for a cluster in a modal. The editable label "add label" can trigger a dropdown on click, but when there are a lot of items in the dropdown, the users would benefit from typing and searching/matching from existing labels

• If this is for specific applications, list them here along with any dates that you need this for. No specific date, since it is not prioritized yet. However, it would be a great enhancement that we would adopt once it is enhanced.

• Link any detailed design documents, rough sketches, wireframes or workflows. Could be similar to how any search/autocomplete search dropdown works now

• State whether this is a new feature or an enhancement on an existing pattern by labeling it accordingly Enhancement on existing pattern

• If this is an enhancement to an existing feature, identify the feature that you want to modify. https://www.patternfly.org/v4/components/label-group/design-guidelines

FYI @mcarrano @mmenestr

[nicolethoen]

@imjoyjean

currently, the advanced search input comes with a 'has words' field by default which is meant to capture search terms that don't fit into an already defined attribute.

The way the design is currently implemented, your suggestion to add a new attribute would also create a input field in the advanced search box. Is this the sort of use case your intending?

Could the 'has words' field meet your needs as it's already written. It is possible to override the attribute name so that it's something closer to your use case rather than 'has words'.

[imjoyjean]

@nicolethoen Hi Nicole, yes, I was hoping a new attribute would create a new label/item in the field. I'm looking at this to use for the "Edit labels" interaction in OCP and ACM, so I don't think the 'has words' would fulfill the needs for that interaction.

[imjoyjean]

Update: Chatted with @mmenestr and discovered that this may be more suitable to propose an enhancement to the label group instead. The enhancement would be to add a searchable component for the existing editable labels https://www.patternfly.org/v4/components/label-group/design-guidelines

Will edit the issue to reflect the discussion.

[mmenestr]

Note - we think that what you want to do might actually be possible already because the menu is part of a demo, it's not part of the actual label group "component". So, in theory, you should be able to switch out the regular non searchable menu, with a searchable menu! But we're going to confirm that with dev

[nicolethoen]

True! Here is a POC in a code sandbox! You can attach any type of menu onto the 'add label' button.

[mcarrano]

@imjoyjean let me know if this addresses your request. And if so, I will close this.

[imjoyjean]

@nicolethoen @mmenestr thank you for the comments! Seems like it can be done!

I was wondering, 1) once you click on "Add label", could it be beneficial for there be an automatic focus on the search box so I don't have to click on it? 2) After a user adds a label, the focus could automatically be on "Add label" again.

One of the complaints I've gotten when I was doing the designs for editing labels was that we wanted to make it much more efficient, hence a user could just type and hit enter or space to generate that label after typing it out.

[nicolethoen]

@imjoyjean yep! that's all possible and would be the job of the developer to implement. So the design should definitely include interaction details like you're calling out. I'd even add that clicking "add label" should open the menu and move focus in to the search input - but so should triggering the "add label" button via keyboard interaction (hitting enter or space).

[mcarrano]

@imjoyjean does this address your needs? If so, I'd like to close this issue out.