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

Aperta Adatta ai principianti
  • Qualcosa non va?
#10,909 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
2/5
Tempo stimato
Meno di un'ora
Idoneità per principianti
88/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, react, typescript
Ambito
frontend

Direzione di ricerca

Il valore errato è la voce isQuiet nello stile width degli styles del Popover in packages/@react-spectrum/s2/src/Picker.tsx, e la stessa espressione calc(var(--trigger-width) - 24) compare in packages/@react-spectrum/s2/src/TabsPicker.tsx. Aggiungi px al 24 in entrambi, poi ricompila e verifica la riproduzione: un Picker quiet largo 300px dovrebbe aprire un menu di 276px con le opzioni su una sola riga.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
TypeScript
Stelle
16k
Fork
1.6k
Merge medio
2g 19h
PR unite (30g)
41

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di adobe/react-spectrum

Tutte le issue di adobe/react-spectrum

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.