Skip to content

fix(web-components/bottom-sheet): file-input clear button is not working in the bottom sheet with expandable #490

Description

@saraparsa13

Describe the bug:

When a <FileInput> is placed inside an expandable <BottomSheet>, clicking the component’s clear button does not remove the selected file.
Instead, the OS file-picker dialog opens again, as if the user had clicked the “choose file” area.

To Reproduce:

  1. Render an expandable bottom-sheet containing a file-input (see snippet below).
  2. Tap file-input, pick any image.
  3. Tap the clear button that appears in the file input.
  4. Observe that the file is not cleared; the OS file-picker re-opens.
<BottomSheet
  expandable
  variant="modal"
  open
  hasStickyActionBar
  hasDismissButton
>
  <div slot={BottomSheetSlots.BODY}>
    <FileInput accept="image/*" />
  </div>
</BottomSheet>

Expected behavior:

Clicking the clear button should:

  • remove the selected file from the input,
  • hide the image preview / filename,
  • not reopen the file-picker dialog.

Desktop:

  • OS: macOS 14.4.1
  • Browser: Chrome 135
  • @tapsioss/react‑components: v0.16.0

Additional context:

  • Issue only appears when expandable prop is present; a fixed-height bottom-sheet works correctly.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions