Skip to content

fix(autocomplete): close button display on mobile#5827

Merged
wingkwong merged 2 commits into
canaryfrom
fix/eng-2854
Oct 19, 2025
Merged

fix(autocomplete): close button display on mobile#5827
wingkwong merged 2 commits into
canaryfrom
fix/eng-2854

Conversation

@wingkwong
Copy link
Copy Markdown
Member

@wingkwong wingkwong commented Oct 18, 2025

Closes #5826

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

@wingkwong wingkwong added this to the v2.8.6 milestone Oct 18, 2025
@linear
Copy link
Copy Markdown

linear Bot commented Oct 18, 2025

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Oct 18, 2025

🦋 Changeset detected

Latest commit: ed9cd3b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
@heroui/autocomplete Patch
@heroui/react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 18, 2025

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

Project Deployment Preview Comments Updated (UTC)
heroui Ready Ready Preview Comment Oct 18, 2025 1:16pm
heroui-sb Ready Ready Preview Comment Oct 18, 2025 1:16pm

💡 Enable Vercel Agent with $100 free credit for automated AI reviews

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Oct 18, 2025

Walkthrough

Patch release: prevents the clear (close/X) button from appearing or being interactive when the Autocomplete is disabled, fixing a mobile bug where disabled autocompletes could be edited.

Changes

Cohort / File(s) Change Summary
Changeset Entry
\.changeset/four-candles-applaud.md
Adds a changeset bumping @heroui/autocomplete and documents a patch fix for the clear/close button display on mobile.
Autocomplete Clear Button Logic
packages/components/autocomplete/src/use-autocomplete.ts
Reorders/extends the isClearable computation to explicitly check originalProps.isDisabled before falling back to originalProps.isReadOnly and originalProps.isClearable, preventing the clear button when disabled.

Sequence Diagram(s)

sequenceDiagram
    participant UI as Autocomplete UI
    participant Hook as useAutocomplete
    participant ClearBtn as ClearButton (render)

    UI->>Hook: render(props)
    Hook-->>Hook: compute isDisabled, isReadOnly, isClearable
    Note over Hook: New order: if isDisabled -> isClearable = false\nelse if isReadOnly -> false\nelse use original isClearable
    Hook-->>ClearBtn: shouldRender = isClearable
    alt shouldRender true
        ClearBtn->>UI: render visible & interactive X
    else shouldRender false
        ClearBtn->>UI: do not render X
    end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)
Check name Status Explanation Resolution
Description Check ⚠️ Warning The pull request description follows the repository template structure and correctly links the PR to issue #5826. However, all substantive content sections—Description, Current behavior, New behavior, Breaking change indicator, and Additional Information—are left empty with only placeholder text. The description lacks any explanation of what was changed, why it was changed, or how the fix addresses the reported issue, making it incomplete and insufficient for code review purposes.
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (3 passed)
Check name Status Explanation
Title Check ✅ Passed The pull request title "fix(autocomplete): close button display on mobile" is concise, specific, and clearly relates to the main objective of the changeset. It accurately describes the primary change—fixing the close button visibility issue on mobile devices when the autocomplete component is disabled. The title uses a standard commit message format and avoids generic terminology, making it immediately understandable to reviewers.
Linked Issues Check ✅ Passed The code changes directly address the requirements from linked issue #5826. The modification to the isClearable logic in use-autocomplete.ts now explicitly checks if the autocomplete component is disabled and, when disabled, prevents the clear button from appearing. This matches the expected behavior described in the issue where the close button should not be visible or clickable when isDisabled is true. The changeset confirms this is fixing the close button display behavior on mobile devices.
Out of Scope Changes Check ✅ Passed All changes in the pull request are directly related to resolving issue #5826. The changeset entry documents a patch-level version bump for the autocomplete component fix, and the logic modification to isClearable in use-autocomplete.ts specifically addresses the requirement to prevent the clear button from appearing when the autocomplete is disabled. No extraneous or unrelated modifications are present in this changeset.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/eng-2854

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb2af67 and ed9cd3b.

📒 Files selected for processing (1)
  • packages/components/autocomplete/src/use-autocomplete.ts (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
  • GitHub Check: Prettier
  • GitHub Check: Continuous Release
  • GitHub Check: TypeScript
  • GitHub Check: Build
  • GitHub Check: Tests
  • GitHub Check: ESLint
🔇 Additional comments (2)
packages/components/autocomplete/src/use-autocomplete.ts (2)

154-161: Excellent refactor of the clearable logic.

The updated logic correctly prioritizes isDisabled and isReadOnly checks before falling back to isClearable. This ensures the clear button is not clearable when the component is in a disabled or readonly state, which directly addresses the reported issue.


449-473: The review comment's analysis is incorrect about how other components handle clear button visibility.

The original review claims that input and number-input components check disabled/readonly in data-visible, but verification shows they actually set the HTML disabled attribute on the button instead. Input's getClearButtonProps (line 540) and number-input's (line 526) both use disabled: originalProps.isDisabled. They do not use data-visible at all.

Autocomplete uses a different pattern: it always renders the button but relies on data-visible for CSS-based visibility. However, autocomplete's getClearButtonProps also doesn't set the disabled attribute. This is inconsistent with input and number-input.

The proper fix is to add disabled: originalProps.isDisabled to autocomplete's getClearButtonProps (matching input/number-input), not to update the data-visible logic. The missing disabled attribute explains why the clear button remains functionally interactive on mobile even when it should be hidden—the button appears off-screen via data-visible but can still be interacted with.

Verify that the intended fix includes adding the disabled attribute to getClearButtonProps, and confirm the mobile issue is resolved by both the visual hiding (data-visible) and functional disabling (disabled attribute).

Likely an incorrect or invalid review comment.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b38a2cf and eb2af67.

📒 Files selected for processing (2)
  • .changeset/four-candles-applaud.md (1 hunks)
  • packages/components/autocomplete/src/use-autocomplete.ts (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
  • GitHub Check: Prettier
  • GitHub Check: TypeScript
  • GitHub Check: Continuous Release
  • GitHub Check: Build
  • GitHub Check: ESLint
🔇 Additional comments (1)
.changeset/four-candles-applaud.md (1)

1-5: LGTM! Changeset properly documents the fix.

The changeset correctly specifies a patch-level version bump for the bugfix and includes a clear reference to issue #5826.

Comment thread packages/components/autocomplete/src/use-autocomplete.ts Outdated
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Oct 18, 2025

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5827

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5827

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5827

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5827

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5827

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5827

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5827

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5827

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5827

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5827

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5827

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5827

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5827

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5827

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5827

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5827

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5827

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5827

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5827

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5827

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5827

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5827

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5827

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5827

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5827

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5827

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5827

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5827

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5827

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5827

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5827

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5827

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5827

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5827

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5827

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5827

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5827

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5827

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5827

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5827

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5827

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5827

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5827

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5827

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5827

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5827

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5827

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5827

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5827

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5827

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5827

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5827

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5827

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5827

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5827

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5827

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5827

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5827

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5827

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5827

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5827

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5827

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5827

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5827

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5827

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5827

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5827

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5827

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5827

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5827

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5827

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5827

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5827

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5827

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5827

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5827

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5827

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5827

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5827

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5827

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5827

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5827

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5827

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5827

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5827

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5827

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5827

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5827

commit: ed9cd3b

@wingkwong wingkwong merged commit 2922b35 into canary Oct 19, 2025
10 checks passed
@wingkwong wingkwong deleted the fix/eng-2854 branch October 19, 2025 03:35
AnYiEE added a commit to AnYiEE/touhou-mystia-izakaya-assistant that referenced this pull request Nov 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] - Autocomplete with isDisabled set to true can be edited on small screen sizes

1 participant