A WordPress plugin dropdown that clips labels or changes width while you type may be using the wrong sizing prop for its component layer. In the upstream @wordpress/ui change, primitive Popup components use width, while composite controls retain popupWidth. Do not rename every occurrence across your plugin.
This guide is for developers maintaining custom editor or admin controls. It is not a fix for a public navigation menu, and the API described here must exist in the package version your plugin actually loads. The upstream change, PR 82193, merged September 1, 2026 and renamed an unreleased primitive prop. That does not establish that an older WordPress installation provides it.
Identify the Component Before Changing CSS
Find the import and the actual component rendered by the failing control. A wrapper with a familiar name can forward props to a different implementation. Compare your package lockfile, the production build's dependency setup and the component API available in the installed environment.
| Component layer |
Sizing prop in the reviewed change |
| Select.Popup |
width |
| Combobox.Popup |
width |
| Autocomplete.Popup |
width |
| SelectControl |
popupWidth |
| SearchableChipSelect |
popupWidth |
| SearchableChipSelectControl |
popupWidth |
The distinction is intentional: a composite includes a trigger and a popup, while the Popup component is already the thing being sized. Replacing popupWidth with width on a composite can silently stop passing your intended setting to the popup.
Reproduce the Failure With Useful Labels
Create an isolated development fixture containing one short option, one multiword label longer than the trigger, and one unbroken identifier. Add a creatable option only if the production control supports it. Test the same fixture in the narrow sidebar where the failure occurs, not only in a full-width component gallery.
Record the trigger and popup widths before typing, after a short search, and after a long search. These are three different observations. A popup can fit its trigger but still overflow the viewport, or stay within the viewport while truncating the meaningful end of every option.
Test a popup before typing, after a short search and after a long search. Compare trigger width, popup width and viewport containment. These are proposed measurements, not recorded test results.
Apply the Smallest Supported Change
For an existing primitive composition, the reviewed API uses this prop shape:
<Select.Popup width="content">
{/* Keep the existing option components here. */}
</Select.Popup>
For a composite, preserve its existing children, selection and change handler while setting popupWidth instead. The snippet is a sizing illustration, not a complete control: retain the root, trigger, option semantics and state management required by your component.
The upstream testing instructions use the PopupWidth stories for SearchableChipSelectControl and SelectControl. They exercise an sm preset on the former and content sizing on the latter. Start with the supported preset or sizing mode appropriate to your installed version before adding a global CSS override.
If the correct prop still has no effect, inspect the popup element's computed width and winning stylesheet rule. Check whether the popup is portalled outside the sidebar. A selector scoped to the sidebar cannot style an element rendered elsewhere. Conversely, a broad rule for every dialog or listbox can damage unrelated controls.
Check Keyboard and Creation Behavior
Use the keyboard to open the control, move through choices and select the long label. Confirm that the selected value is still correct after closing and reopening. For a searchable control, enter text that has no match, then use the supported creation action and verify that the new value is retained.
Repeat with a narrow viewport and browser zoom. The test passes when the popup stays usable, the full choice can be understood, focus remains visible and typing does not cause distracting width changes. Do not hide overflow as the sole fix if it removes the only way to distinguish choices.
If the problem is that the entire optional control disappears, use the separate ToolsPanelItem visibility guide. For a plugin update that leaves editors unable to choose a required value, request a targeted editor-control repair with the component import, package versions and a minimal failing fixture.
References reviewed October 21, 2026. Diagrams and test fixtures are explanatory, not customer results.