NextUI Input - Clear button not working

[pablojsx]

This is a Vite project where I installed NextUI, when I click the clear button nothing happens. I've been developing this app for like 3 months and I just noticed this. I have other Next apps where it works but not in Vite.

[unav4ila8le]

Same issue here +1

[ChrisNSki]

Also seeing this, to add a bit more detail, I've not changed the component to be controlled, so I shouldn't need to handle the clear on my state

[J4v4Scr1pt]

+1

[alphaxek]

Hi @pablojsx @J4v4Scr1pt @ChrisNSki @unav4ila8le I created a new Vite project with NextUI and Input clear button is working fine on my side.

can you please provide the code or try updating packages.

Vite test:

Code:

import React from "react";
import {Input} from "@nextui-org/react";

export default function App() {
  return (
    <Input
      isClearable
      type="email"
      label="Email"
      variant="bordered"
      placeholder="Enter your email"
      defaultValue="junior@nextui.org"
      onClear={() => console.log("input cleared")}
      className="max-w-xs"
    />
  );
}

[J4v4Scr1pt]

My memory fails me in this case 😅 and we have no input atm on our site (migration process). But I can try again later today when I'm on the computer again 😊.

[alphaxek]

sure👍

[J4v4Scr1pt]

Latest version of nextUI 2.2.10 and the clear button in the Input works like a charm ✌

[unav4ila8le]

I can confirm that now it works.
However, it seems to not work when you have an "endContent" on the input.

[wingkwong]

@unav4ila8le this is an known issue. The fix is being reviewed.