S2 quiet Picker menu is always 192px wide: its width calc() has no unit

Open Beginner friendly
  • Is something wrong?
#10,909 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
Under an hour
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, react, typescript
Domain
frontend

Research direction

The bad value is the isQuiet entry in the width style of the Popover styles in packages/@react-spectrum/s2/src/Picker.tsx, and the same calc(var(--trigger-width) - 24) expression appears in packages/@react-spectrum/s2/src/TabsPicker.tsx. Add px to the 24 in both, then rebuild and check the reproduction: a quiet Picker 300px wide should open a 276px menu with its options on one line.

Written by the indexing model from the issue text.

Description

Provide a general summary of the issue here

A quiet S2 Picker's menu is meant to be its field's width less 24px, but the CSS for that width has no unit: calc(var(--trigger-width) - 24). Browsers drop the declaration as invalid, so every quiet menu falls back to its 192px minimum width. In a wider quiet Picker, the menu is much narrower than the field and its options wrap. TabsPicker has the same expression.

🤔 Expected Behavior?

A quiet Picker 300px wide opens a menu 276px wide (300 - 24), and its options fit on one line.

😯 Current Behavior

The menu is 192px wide whatever the field's width, and longer options wrap onto two or three lines. Measured in the reproduction below, with the same 300px Picker side by side:

Picker Field Menu Option heights
Standard 300px 300px 32, 32, 50
Quiet 300px 192px 32, 50, 68

The cause is the arbitrary value in the Popover's styles in packages/@react-spectrum/s2/src/Picker.tsx:

width: {
  default: '--trigger-width',
  isQuiet: '[calc(var(--trigger-width) - 24)]'
}

It compiles to .ZbWuche17 { width: calc(var(--trigger-width) - 24); } in dist/private/Picker.css. A calc() that subtracts a unitless number from a length is invalid, so the browser ignores the rule and only minWidth: 192 applies. packages/@react-spectrum/s2/src/TabsPicker.tsx has the same value, width: 'calc(var(--trigger-width) - 24)', which also ends up in dist/private/TabsPicker.css.

💁 Possible Solution

Add the unit in both files:

isQuiet: '[calc(var(--trigger-width) - 24px)]'

width: 'calc(var(--trigger-width) - 24px)'

Changing - 24 to - 24px in the built dist/private/Picker.css and dist/private/TabsPicker.css fixes the reproduction: the quiet menu becomes 276px and its options fit on one line (heights 32, 32, 50, the same as the standard Picker). Both files define the same class, so both need the change.

🔦 Context

Our create form uses quiet Pickers that keep their field's width once a value is chosen, as values in a document. Their menus came out narrower than the fields, with options like "Experience Data Model" wrapping onto two lines. We work around it with an app stylesheet rule that sets the menu's width while a quiet Picker is open.

🖥️ Steps to Reproduce

A minimal Vite app.

package.json:

{
  "name": "s2-quiet-picker-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite" },
  "dependencies": {
    "@react-spectrum/s2": "1.7.1",
    "react": "^19.2.7",
    "react-dom": "^19.2.7"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^6.0.2",
    "unplugin-parcel-macros": "^0.2.0",
    "vite": "^8.0.16"
  }
}

vite.config.js:

import react from "@vitejs/plugin-react";
import macros from "unplugin-parcel-macros";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [macros.vite(), react()],
  optimizeDeps: { exclude: ["@react-spectrum/s2/style"] },
});

index.html:

<!doctype html>
<html lang="en"><body><div id="root"></div><script type="module" src="/src/main.jsx"></script></body></html>

src/main.jsx:

import "@react-spectrum/s2/page.css";
import { Picker, PickerItem, Provider } from "@react-spectrum/s2";
import { style } from "@react-spectrum/s2/style" with { type: "macro" };
import { createRoot } from "react-dom/client";

// The same Picker, standard and quiet, with its longest option chosen. The
// quiet Picker is as wide as its value, and its menu should be that width
// less 24px; it's always 192px instead, and the options wrap.
function App() {
  return (
    <Provider background="base">
      <div style={{ display: "flex", gap: 48, padding: 24 }}>
        {[false, true].map((isQuiet) => (
          <Picker
            key={String(isQuiet)}
            label={isQuiet ? "Quiet" : "Standard"}
            isQuiet={isQuiet}
            defaultSelectedKey="genai"
            styles={style({ width: 300 })}
          >
            <PickerItem id="standard">Standard Data Model</PickerItem>
            <PickerItem id="experience">Experience Data Model</PickerItem>
            <PickerItem id="genai">Adobe Experience Platform Web Service Data Model</PickerItem>
          </Picker>
        ))}
      </div>
    </Provider>
  );
}

createRoot(document.getElementById("root")).render(<App />);
  1. Run npm install, then npm run dev.
  2. Open the Standard Picker: its menu is as wide as the field, 300px.
  3. Open the Quiet Picker: its menu is 192px wide, and "Experience Data Model" and the long option wrap.
  4. In DevTools, the menu's width: calc(var(--trigger-width) - 24) declaration is crossed out as invalid.
Version

@react-spectrum/s2 1.7.1 (the same code is on main)

What browsers are you seeing the problem on?

Chrome

What operating system are you using?

macOS

🧢 Your Company/Team

Adobe / Event Telemetry

Dominant language
TypeScript
Stars
16k
Forks
1.6k
Avg merge
2d 19h
Merged PRs (30d)
41

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from adobe/react-spectrum

All issues in adobe/react-spectrum

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.