Skip to content

fix(CommandPalette, MultiSelector): prevent iOS zoom on input focus - #1993

Merged
cixzhang merged 1 commit into
mainfrom
navi/fix/mobile-input-zoom
May 3, 2026
Merged

fix(CommandPalette, MultiSelector): prevent iOS zoom on input focus#1993
cixzhang merged 1 commit into
mainfrom
navi/fix/mobile-input-zoom

Conversation

@cixzhang

@cixzhang cixzhang commented May 3, 2026

Copy link
Copy Markdown
Contributor

iOS Safari zooms the viewport when focusing inputs with font-size < 16px. All other text inputs already use max(1rem, ...) on @media (pointer: coarse) to ensure ≥ 16px on touch devices. Two were missed:

  • CommandPaletteInput — was using textSizeVars['--font-size-base'] (14px) without a coarse-pointer override. Switched to typeScaleVars['--text-body-size'] (consistent with TextInput/TextArea) and added the override.
  • MultiSelector searchInput — was using typeScaleVars['--text-label-size'] without a coarse-pointer override. Added the override.

Pattern applied (same as TextInput, NumberInput, DateInput, TimeInput, TextArea, Selector, Typeahead):

fontSize: {
  default: typeScaleVars['--text-body-size'],
  '@media (pointer: coarse)': `max(1rem, ${typeScaleVars['--text-body-size']})`,
},

iOS Safari zooms the viewport when focusing inputs with font-size < 16px.
All other text inputs already use `max(1rem, ...)` on `@media (pointer: coarse)`
to guarantee >= 16px on touch devices. CommandPaletteInput and MultiSelector's
search input were missed.

- CommandPaletteInput: switch from textSizeVars to typeScaleVars (consistent
  with other inputs) and add the coarse-pointer override
- MultiSelector searchInput: add the coarse-pointer override
@vercel

vercel Bot commented May 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
xds-sandbox Ready Ready Preview, Comment May 3, 2026 10:33am

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label May 3, 2026
@github-actions

github-actions Bot commented May 3, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@xds/core 17.7KB 27.5KB 4.1KB

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

@cixzhang
cixzhang merged commit b302a76 into main May 3, 2026
20 checks passed
@github-actions
github-actions Bot deleted the navi/fix/mobile-input-zoom branch May 4, 2026 07:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant