diff --git a/.changeset/itchy-masks-hear.md b/.changeset/itchy-masks-hear.md new file mode 100644 index 0000000000..c93aa7ad51 --- /dev/null +++ b/.changeset/itchy-masks-hear.md @@ -0,0 +1,5 @@ +--- +"@heroui/theme": patch +--- + +use peer-data-[filled=true]:pointer-events-none to disable clear button interaction when input is disabled and has content diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts index 654efce64e..fc8e8b9911 100644 --- a/packages/core/theme/src/components/input.ts +++ b/packages/core/theme/src/components/input.ts @@ -890,6 +890,14 @@ const input = tv({ ], }, }, + // isClearable & isDisabled + { + isClearable: true, + isDisabled: true, + class: { + clearButton: "peer-data-[filled=true]:pointer-events-none", + }, + }, ], }); diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts index 42299b12d5..a0123f41ad 100644 --- a/packages/core/theme/src/components/number-input.ts +++ b/packages/core/theme/src/components/number-input.ts @@ -849,6 +849,14 @@ const numberInput = tv({ label: ["pe-2", "max-w-full", "text-ellipsis", "overflow-hidden"], }, }, + // isClearable & isDisabled + { + isClearable: true, + isDisabled: true, + class: { + clearButton: "peer-data-[filled=true]:pointer-events-none", + }, + }, ], });