From 33de6d91c7960bb208478f8368946b6c46149660 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Thu, 15 Aug 2024 09:44:12 +0200 Subject: [PATCH 1/6] remove placeholder when value added; add placeholder to story --- @navikt/core/react/src/form/combobox/Input/InputController.tsx | 3 +++ @navikt/core/react/src/form/combobox/combobox.stories.tsx | 3 +++ 2 files changed, 6 insertions(+) diff --git a/@navikt/core/react/src/form/combobox/Input/InputController.tsx b/@navikt/core/react/src/form/combobox/Input/InputController.tsx index 13ac34003a..08a14d5214 100644 --- a/@navikt/core/react/src/form/combobox/Input/InputController.tsx +++ b/@navikt/core/react/src/form/combobox/Input/InputController.tsx @@ -34,6 +34,7 @@ export const InputController = forwardRef< toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true, + placeholder, ...rest } = props; @@ -65,6 +66,7 @@ export const InputController = forwardRef< id={inputProps.id} ref={mergedInputRef} inputClassName={inputClassName} + placeholder={selectedOptions.length ? "" : placeholder} {...rest} /> ) : ( @@ -74,6 +76,7 @@ export const InputController = forwardRef< ref={mergedInputRef} inputClassName={inputClassName} shouldShowSelectedOptions={shouldShowSelectedOptions} + placeholder={selectedOptions.length ? "" : placeholder} {...rest} /> diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx index 9baedf2948..2145bcc6a1 100644 --- a/@navikt/core/react/src/form/combobox/combobox.stories.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.stories.tsx @@ -51,6 +51,9 @@ Default.argTypes = { description: { control: { type: "text" }, }, + placeholder: { + control: { type: "text" }, + }, disabled: { control: { type: "boolean" }, }, From 7c80e07e0e93afd67dc55ea899f46a050a82d8ca Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Thu, 15 Aug 2024 10:03:52 +0200 Subject: [PATCH 2/6] add max selected to default story --- @navikt/core/react/src/form/combobox/combobox.stories.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx index 2145bcc6a1..85e9549312 100644 --- a/@navikt/core/react/src/form/combobox/combobox.stories.tsx +++ b/@navikt/core/react/src/form/combobox/combobox.stories.tsx @@ -35,7 +35,11 @@ const options = [ ]; export const Default: StoryFunction = (props) => ( - + ); Default.args = { From 1add1c5ce622694d5619ae860a68eae2f7671402 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Thu, 15 Aug 2024 10:06:24 +0200 Subject: [PATCH 3/6] patch changeset --- .changeset/friendly-pens-sin.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/friendly-pens-sin.md diff --git a/.changeset/friendly-pens-sin.md b/.changeset/friendly-pens-sin.md new file mode 100644 index 0000000000..69b4a5d08e --- /dev/null +++ b/.changeset/friendly-pens-sin.md @@ -0,0 +1,6 @@ +--- +"@navikt/ds-react": patch +"@navikt/aksel": patch +--- + +:adhesive_bandage: Placeholder goes away when value added From 531b67d94d5c73ba6aff650cfcb1e65ba2fc02d5 Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Thu, 15 Aug 2024 11:02:47 +0200 Subject: [PATCH 4/6] Update .changeset/friendly-pens-sin.md Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- .changeset/friendly-pens-sin.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/friendly-pens-sin.md b/.changeset/friendly-pens-sin.md index 69b4a5d08e..2a9f90e594 100644 --- a/.changeset/friendly-pens-sin.md +++ b/.changeset/friendly-pens-sin.md @@ -3,4 +3,4 @@ "@navikt/aksel": patch --- -:adhesive_bandage: Placeholder goes away when value added +:adhesive_bandage: Combobox: Placeholder goes away when an option is selected From 969a9a91614c39fa2d98cc99965a301df878a75b Mon Sep 17 00:00:00 2001 From: Lars Eirik Korsgaard Hansen <71271458+larseirikhansen@users.noreply.github.com> Date: Thu, 15 Aug 2024 11:05:15 +0200 Subject: [PATCH 5/6] Update friendly-pens-sin.md --- .changeset/friendly-pens-sin.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/friendly-pens-sin.md b/.changeset/friendly-pens-sin.md index 2a9f90e594..8844f8e987 100644 --- a/.changeset/friendly-pens-sin.md +++ b/.changeset/friendly-pens-sin.md @@ -1,6 +1,5 @@ --- "@navikt/ds-react": patch -"@navikt/aksel": patch --- :adhesive_bandage: Combobox: Placeholder goes away when an option is selected From dbd5b387602188c9eb1a3e627388e60f94d1b225 Mon Sep 17 00:00:00 2001 From: Lars Hansen Date: Thu, 15 Aug 2024 12:07:28 +0200 Subject: [PATCH 6/6] move fix to Input from InputController --- @navikt/core/react/src/form/combobox/Input/Input.tsx | 1 + @navikt/core/react/src/form/combobox/Input/InputController.tsx | 3 --- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx index 17448a8e3d..34db0ac86c 100644 --- a/@navikt/core/react/src/form/combobox/Input/Input.tsx +++ b/@navikt/core/react/src/form/combobox/Input/Input.tsx @@ -230,6 +230,7 @@ const Input = forwardRef( aria-activedescendant={activeDecendantId} aria-describedby={ariaDescribedBy} aria-invalid={inputProps["aria-invalid"]} + placeholder={selectedOptions.length ? undefined : rest.placeholder} className={cl( inputClassName, "navds-combobox__input", diff --git a/@navikt/core/react/src/form/combobox/Input/InputController.tsx b/@navikt/core/react/src/form/combobox/Input/InputController.tsx index 08a14d5214..13ac34003a 100644 --- a/@navikt/core/react/src/form/combobox/Input/InputController.tsx +++ b/@navikt/core/react/src/form/combobox/Input/InputController.tsx @@ -34,7 +34,6 @@ export const InputController = forwardRef< toggleListButtonLabel, inputClassName, shouldShowSelectedOptions = true, - placeholder, ...rest } = props; @@ -66,7 +65,6 @@ export const InputController = forwardRef< id={inputProps.id} ref={mergedInputRef} inputClassName={inputClassName} - placeholder={selectedOptions.length ? "" : placeholder} {...rest} /> ) : ( @@ -76,7 +74,6 @@ export const InputController = forwardRef< ref={mergedInputRef} inputClassName={inputClassName} shouldShowSelectedOptions={shouldShowSelectedOptions} - placeholder={selectedOptions.length ? "" : placeholder} {...rest} />