Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a Storybook file to test bug behaviour with scrolling in Combobox with autocomple turned on #3279

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Add a Storybook file to test bug behaviour with scrolling in Combobox with autocomple turned on #3279

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7ef8d5f
Add a Storybook file to test bug behaviour with scrolling in Combobox…
it-vegard Oct 24, 2024
838d019
Add a log line for remote debugging
it-vegard Oct 25, 2024
2b71215
Merge branch 'main' into bugfix/combobox-with-autocomplete-unwanted-s…
it-vegard Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions @navikt/core/react/src/form/combobox/FilteredOptions/useVirtualFocus.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ const useVirtualFocus = (

const setActiveAndScrollToElement = (element?: HTMLElement) => {
setActiveElement(element);
// eslint-disable-next-line no-console
console.log("scrolling to element", element);
element?.scrollIntoView?.({ block: "nearest" });
};

Expand Down
41 changes: 40 additions & 1 deletion @navikt/core/react/src/form/combobox/combobox.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import { Alert } from "../../alert";
import { Button } from "../../button";
import { Chips } from "../../chips";
import { Page } from "../../layout/page";
import { VStack } from "../../layout/stack";
import { Modal } from "../../modal";
import { BodyLong } from "../../typography";
import { BodyLong, Heading } from "../../typography";
import { Textarea } from "../textarea";
import { TextField } from "../textfield";
import { ComboboxProps, UNSAFE_Combobox } from "./index";

Expand Down Expand Up @@ -578,3 +580,40 @@ Chromatic.parameters = {
disable: false,
},
};

export const InAFullPage: StoryFn = () => {
return (
<Page>
<Page.Block>
<VStack gap="4">
<Heading level="1" size="large">
Multiselect komboboks
</Heading>
<BodyLong>
Multiselect kan brukes til å velge flere alternativer samtidig.
Dette er nyttig i situasjoner hvor brukeren trenger å gjøre flere
valg fra en liste med alternativer.
</BodyLong>
<VStack as="form" gap="4">
<TextField label="Fornavn" />
<TextField label="Etternavn" />
<TextField label="Telefonnummer" />
<TextField label="Adresse" />
<TextField label="Postnummer" maxLength={4} />
<TextField label="Poststed" />
<UNSAFE_Combobox
id="combobox-with-multiselect"
label="Komboboks - velg flere"
options={options}
shouldAutocomplete
/>
<Textarea label="Beskrivelse" />
<TextField label="E-post" />
<TextField label="Bekreft e-post" />
<Button>Send</Button>
</VStack>
</VStack>
</Page.Block>
</Page>
);
};
Loading