Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add the ability to define the width of the popover in ComboBox/AutoComplete #5430

Closed
dannify opened this issue Nov 16, 2023 · 1 comment · Fixed by #5446
Closed

Add the ability to define the width of the popover in ComboBox/AutoComplete #5430

dannify opened this issue Nov 16, 2023 · 1 comment · Fixed by #5446
Labels
good first issue Good for newcomers

Comments

@dannify
Copy link
Member

dannify commented Nov 16, 2023

Provide a general summary of the feature here

Pickers currently allow for a custom width using the menuWidth prop see docs

We want to allow this option in ComboBox and AutoComplete. It should always default to the width of the input, as it does now, however if the prop menuWidth is set, use that instead.

Note: menuWidth needs to be >= width of the input. If the prop is < the input, default to the min-width and ignore the prop.

🤔 Expected Behavior?

Allow the popover width to be customizable.

😯 Current Behavior

No option to control this

💁 Possible Solution

Similar to

let style = {
width: menuWidth ? dimensionValue(menuWidth) : width,
minWidth: isQuiet ? `calc(${buttonWidth}px + calc(2 * var(--spectrum-dropdown-quiet-offset)))` : buttonWidth
};

🔦 Context

Use case of combobox and autocomplete where the content of the options needs more room to display. Truncation might not always be the right answer.

💻 Examples

image

🧢 Your Company/Team

Adobe/Sign

🕷 Tracking Issue

No response

@dannify dannify added the good first issue Good for newcomers label Nov 17, 2023
@sookmax
Copy link
Contributor

sookmax commented Nov 20, 2023

@dannify Hi! I want to take a stab at this.

By the way, just to make sure I understood everything correctly, by AutoComplete you mean SearchAutocomplete under the pickers category in React Spectrum, right? I'm asking this because I don't see it under the pickers category in current docs, but I DO see it (tagged as alpha) when I run yarn start:docs on main branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants