archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

fix(input): input display with hidden type (#3174)

Browse Source 
* fix(input): input display with hidden type

* chore(input): add isHiddenType to dependency

* refactor(input): move the styles to theme and change hidden to data attr

* feat(theme): add isHiddenType to input

* chore(changeset): include theme package

* chore(input): revise input test

* fix(theme): remove isHiddenType from variants and use data-hidden prop instead

* fix(theme): remove isHiddenType from defaultVariants

* fix(input): remove isHiddenType passing to input
This commit is contained in:
աӄա 2024-06-15 07:56:52 +08:00 committed by GitHub
parent bea1bde667
commit dbb4b8ee56
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 39 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/selfish-tips-joke.md Normal file
View File

@ -0,0 +1,6 @@
---
"@nextui-org/input": patch
"@nextui-org/theme": patch
---
Fix input display with hidden type (#3170)

27
packages/components/input/__tests__/input.test.tsx
View File

@ -153,6 +153,33 @@ describe("Input", () => {
expect(onClear).toHaveBeenCalledTimes(1);
});
it("should not display input with hidden type", async () => {
const wrapper = render(
<>
<Input data-testid="input-1" type="hidden" />
<Input data-testid="input-2" />
</>,
);
const {container} = wrapper;
const inputBaseWrappers = container.querySelectorAll("[data-slot='base']");
expect(inputBaseWrappers).toHaveLength(2);
const inputs = container.querySelectorAll("input");
expect(inputs).toHaveLength(2);
expect(inputBaseWrappers[0]).toHaveAttribute("data-hidden");
expect(inputBaseWrappers[1]).not.toHaveAttribute("data-hidden");
expect(inputs[0]).not.toBeVisible();
expect(inputs[1]).toBeVisible();
});
});
describe("Input with React Hook Form", () => {

6
packages/components/input/src/use-input.ts
View File

@ -145,9 +145,11 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
const isFilledByDefault = ["date", "time", "month", "week", "range"].includes(type!);
const isFilled = !isEmpty(inputValue) || isFilledByDefault;
const isFilledWithin = isFilled || isFocusWithin;
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
const isHiddenType = type === "hidden";
const isMultiline = originalProps.isMultiline;
const baseStyles = clsx(classNames?.base, className, isFilled ? "is-filled" : "");
const handleClear = useCallback(() => {
setInputValue("");
@ -286,6 +288,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
"data-has-helper": dataAttr(hasHelper),
"data-has-label": dataAttr(hasLabel),
"data-has-value": dataAttr(!isPlaceholderShown),
"data-hidden": dataAttr(isHiddenType),
...focusWithinProps,
...props,
};
@ -307,6 +310,7 @@ export function useInput<T extends HTMLInputElement | HTMLTextAreaElement = HTML
isFilledWithin,
hasPlaceholder,
focusWithinProps,
isHiddenType,
originalProps.isReadOnly,
originalProps.isRequired,
originalProps.isDisabled,

2
packages/core/theme/src/components/input.ts
View File

@ -23,7 +23,7 @@ import {dataFocusVisibleClasses, groupDataFocusVisibleClasses} from "../utils";
*/
const input = tv({
slots: {
base: "group flex flex-col",
base: "group flex flex-col data-[hidden=true]:hidden",
label: [
"absolute",
"z-10",