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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#10,909 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
Dưới một giờ
Mức phù hợp với người mới
88/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Giá trị sai là mục isQuiet trong kiểu width của styles Popover ở packages/@react-spectrum/s2/src/Picker.tsx, và cùng biểu thức calc(var(--trigger-width) - 24) xuất hiện trong packages/@react-spectrum/s2/src/TabsPicker.tsx. Thêm px vào số 24 ở cả hai tệp, sau đó build lại và kiểm tra bước tái hiện: một Picker quiet rộng 300px sẽ mở menu rộng 276px với các tùy chọn nằm trên một dòng.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
16k
Fork
1.6k
Merge trung bình
2 ngày 19 giờ
Pull request đã merge (30 ngày)
41

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của adobe/react-spectrum

Tất cả issue của adobe/react-spectrum

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.