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.

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

fix(SelectInputV2): autofocus searchbar #3727

Merged
merged 4 commits into from
Apr 30, 2024
Merged

Conversation

DorianMaliszewski
Copy link
Member

Summary

Type

  • Bug

Summarise concisely:

What is expected?

Autofocusing the searchbar should not scroll to top. I add a temporary fix because @matthprost is working on Popup and will make a fix on this component. We will can put autoFocus back and drop my fix :)

The following changes where made:

  1. Use a ref for the Search bar input

  2. Add an useEffect and setTimeout to focus it after Popup styles computation

Relevant logs and/or screenshots

Page Before After
url screenshot screenshot
url screenshot screenshot

Copy link

changeset-bot bot commented Apr 30, 2024

🦋 Changeset detected

Latest commit: 6e1735a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@ultraviolet/ui Minor
@ultraviolet/form Patch
@ultraviolet/plus Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

github-actions bot commented Apr 30, 2024

size-limit report 📦

Path Size
packages/form/dist/constants.js, packages/form/dist/index.js, packages/themes/dist/index.js, packages/form/dist/hooks/useField.js, packages/form/dist/hooks/useFieldArray.js, packages/form/dist/hooks/useForm.js, packages/form/dist/hooks/useFormState.js, packages/form/dist/hooks/useOnFieldChange.js, packages/form/dist/validators/maxDate.js, packages/form/dist/validators/minDate.js, packages/ui/dist/src/index.js, packages/form/dist/components/CheckboxField/index.js, packages/form/dist/components/CheckboxGroupField/index.js, packages/form/dist/components/DateField/index.js, packages/form/dist/components/Form/defaultErrors.js, packages/form/dist/components/Form/index.js, packages/form/dist/components/KeyValueField/index.js, packages/form/dist/components/NumberInputField/index.js, packages/form/dist/components/NumberInputFieldV2/index.js, packages/form/dist/components/RadioField/index.js, packages/form/dist/components/RadioGroupField/index.js, packages/form/dist/components/SelectInputField/index.js, packages/form/dist/components/SelectInputFieldV2/index.js, packages/form/dist/components/SelectableCardField/index.js, packages/form/dist/components/SelectableCardGroupField/index.js, packages/form/dist/components/Submit/index.js, packages/form/dist/components/SubmitErrorAlert/index.js, packages/form/dist/components/TagInputField/index.js, packages/form/dist/components/TextAreaField/index.js, packages/form/dist/components/TextInputField/index.js, packages/form/dist/components/TextInputFieldV2/index.js, packages/form/dist/components/TimeField/index.js, packages/form/dist/components/ToggleField/index.js, packages/form/dist/providers/ErrorContext/index.js, packages/themes/dist/themes/console/dark.js, packages/themes/dist/themes/console/darker.js, packages/themes/dist/themes/console/index.js, packages/themes/dist/themes/console/light.js, packages/ui/dist/react-datepicker/dist/react-datepicker.min.css.js, packages/ui/dist/react-toastify/dist/ReactToastify.min.css.js, packages/ui/dist/src/helpers/isJSON.js, packages/ui/dist/src/helpers/legend.js, packages/ui/dist/src/helpers/recursivelyGetChildrenString.js, packages/ui/dist/src/hooks/useIsOverflowing.js, packages/ui/dist/src/theme/index.js, packages/ui/dist/src/utils/animations.js, packages/ui/dist/src/utils/capitalize.js, packages/ui/dist/src/utils/ids.js, packages/ui/dist/src/utils/normalize.js, packages/themes/dist/themes/console/deprecated/dark.js, packages/themes/dist/themes/console/deprecated/darker.js, packages/themes/dist/themes/console/deprecated/light.js, packages/ui/dist/src/components/ActionBar/index.js, packages/ui/dist/src/components/Alert/index.js, packages/ui/dist/src/components/Avatar/index.js, packages/ui/dist/src/components/Badge/index.js, packages/ui/dist/src/components/Banner/index.js, packages/ui/dist/src/components/BarChart/Tooltip.js, packages/ui/dist/src/components/BarChart/index.js, packages/ui/dist/src/components/BarStack/index.js, packages/ui/dist/src/components/Breadcrumbs/index.js, packages/ui/dist/src/components/Bullet/index.js, packages/ui/dist/src/components/Button/index.js, packages/ui/dist/src/components/Card/index.js, packages/ui/dist/src/components/Carousel/index.js, packages/ui/dist/src/components/Checkbox/index.js, packages/ui/dist/src/components/CheckboxGroup/index.js, packages/ui/dist/src/components/CopyButton/index.js, packages/ui/dist/src/components/DateInput/index.js, packages/ui/dist/src/components/Dialog/Context.js, packages/ui/dist/src/components/Dialog/index.js, packages/ui/dist/src/components/EmptyState/index.js, packages/ui/dist/src/components/Expandable/index.js, packages/ui/dist/src/components/GlobalAlert/GlobalAlertLink.js, packages/ui/dist/src/components/GlobalAlert/index.js, packages/ui/dist/src/components/LineChart/CustomLegend.js, packages/ui/dist/src/components/LineChart/Tooltip.js, packages/ui/dist/src/components/LineChart/helpers.js, packages/ui/dist/src/components/LineChart/index.js, packages/ui/dist/src/components/Link/index.js, packages/ui/dist/src/components/List/Body.js, packages/ui/dist/src/components/List/Cell.js, packages/ui/dist/src/components/List/HeaderCell.js, packages/ui/dist/src/components/List/HeaderRow.js, packages/ui/dist/src/components/List/ListContext.js, packages/ui/dist/src/components/List/Row.js, packages/ui/dist/src/components/List/SelectBar.js, packages/ui/dist/src/components/List/SkeletonRows.js, packages/ui/dist/src/components/List/constants.js, packages/ui/dist/src/components/List/index.js, packages/ui/dist/src/components/Loader/index.js, packages/ui/dist/src/components/Menu/Item.js, packages/ui/dist/src/components/Menu/index.js, packages/ui/dist/src/components/MenuV2/Group.js, packages/ui/dist/src/components/MenuV2/Item.js, packages/ui/dist/src/components/MenuV2/index.js, packages/ui/dist/src/components/Meter/index.js, packages/ui/dist/src/components/Modal/Dialog.js, packages/ui/dist/src/components/Modal/Disclosure.js, packages/ui/dist/src/components/Modal/constants.js, packages/ui/dist/src/components/Modal/index.js, packages/ui/dist/src/components/Notice/index.js, packages/ui/dist/src/components/Notification/index.js, packages/ui/dist/src/components/NumberInput/helpers.js, packages/ui/dist/src/components/NumberInput/index.js, packages/ui/dist/src/components/NumberInputV2/index.js, packages/ui/dist/src/components/Pagination/getPageNumbers.js, packages/ui/dist/src/components/Pagination/index.js, packages/ui/dist/src/components/PasswordCheck/index.js, packages/ui/dist/src/components/PasswordStrengthMeter/index.js, packages/ui/dist/src/components/PieChart/Legends.js, packages/ui/dist/src/components/PieChart/Tooltip.js, packages/ui/dist/src/components/PieChart/index.js, packages/ui/dist/src/components/Popover/index.js, packages/ui/dist/src/components/Popup/animations.js, packages/ui/dist/src/components/Popup/helpers.js, packages/ui/dist/src/components/Popup/index.js, packages/ui/dist/src/components/ProgressBar/index.js, packages/ui/dist/src/components/Radio/index.js, packages/ui/dist/src/components/RadioGroup/index.js, packages/ui/dist/src/components/Row/index.js, packages/ui/dist/src/components/SelectInput/index.js, packages/ui/dist/src/components/SelectInputV2/Dropdown.js, packages/ui/dist/src/components/SelectInputV2/DropdownOption.js, packages/ui/dist/src/components/SelectInputV2/SearchBarDropdown.js, packages/ui/dist/src/components/SelectInputV2/SelectBar.js, packages/ui/dist/src/components/SelectInputV2/SelectInputProvider.js, packages/ui/dist/src/components/SelectInputV2/findOptionInOptions.js, packages/ui/dist/src/components/SelectInputV2/index.js, packages/ui/dist/src/components/SelectInputV2/types.js, packages/ui/dist/src/components/SelectableCard/index.js, packages/ui/dist/src/components/SelectableCardGroup/index.js, packages/ui/dist/src/components/Separator/index.js, packages/ui/dist/src/components/Skeleton/Block.js, packages/ui/dist/src/components/Skeleton/Blocks.js, packages/ui/dist/src/components/Skeleton/BoxWithIcon.js, packages/ui/dist/src/components/Skeleton/Donut.js, packages/ui/dist/src/components/Skeleton/IconSkeleton.js, packages/ui/dist/src/components/Skeleton/Line.js, packages/ui/dist/src/components/Skeleton/List.js, packages/ui/dist/src/components/Skeleton/Slider.js, packages/ui/dist/src/components/Skeleton/Square.js, packages/ui/dist/src/components/Skeleton/index.js, packages/ui/dist/src/components/Snippet/index.js, packages/ui/dist/src/components/Stack/index.js, packages/ui/dist/src/components/Status/index.js, packages/ui/dist/src/components/StepList/index.js, packages/ui/dist/src/components/Stepper/index.js, packages/ui/dist/src/components/SwitchButton/FocusOverlay.js, packages/ui/dist/src/components/SwitchButton/index.js, packages/ui/dist/src/components/Table/Body.js, packages/ui/dist/src/components/Table/Cell.js, packages/ui/dist/src/components/Table/Header.js, packages/ui/dist/src/components/Table/HeaderCell.js, packages/ui/dist/src/components/Table/HeaderRow.js, packages/ui/dist/src/components/Table/Row.js, packages/ui/dist/src/components/Table/SelectBar.js, packages/ui/dist/src/components/Table/SkeletonRows.js, packages/ui/dist/src/components/Table/TableContext.js, packages/ui/dist/src/components/Table/index.js, packages/ui/dist/src/components/Tabs/Tab.js, packages/ui/dist/src/components/Tabs/TabMenu.js, packages/ui/dist/src/components/Tabs/TabMenuItem.js, packages/ui/dist/src/components/Tabs/TabsContext.js, packages/ui/dist/src/components/Tabs/index.js, packages/ui/dist/src/components/Tag/index.js, packages/ui/dist/src/components/TagInput/index.js, packages/ui/dist/src/components/TagList/index.js, packages/ui/dist/src/components/Text/index.js, packages/ui/dist/src/components/TextArea/index.js, packages/ui/dist/src/components/TextInput/index.js, packages/ui/dist/src/components/TextInputV2/index.js, packages/ui/dist/src/components/TimeInput/index.js, packages/ui/dist/src/components/Toaster/index.js, packages/ui/dist/src/components/Toggle/index.js, packages/ui/dist/src/components/ToggleGroup/index.js, packages/ui/dist/src/components/Tooltip/index.js, packages/ui/dist/src/components/VerificationCode/index.js, packages/ui/dist/src/utils/responsive/Breakpoint.js, packages/ui/dist/src/utils/responsive/utilities.js, packages/ui/dist/src/components/Banner/assets/default-image-small.svg.js, packages/ui/dist/src/components/Banner/assets/default-image.svg.js, packages/ui/dist/src/components/Dialog/subComponents/Button.js, packages/ui/dist/src/components/Dialog/subComponents/Buttons.js, packages/ui/dist/src/components/Dialog/subComponents/CancelButton.js, packages/ui/dist/src/components/Dialog/subComponents/Stack.js, packages/ui/dist/src/components/Dialog/subComponents/Text.js 163.88 KB (+0.1% 🔺)

Copy link

codecov bot commented Apr 30, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.61%. Comparing base (a4c8dd6) to head (6e1735a).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main    #3727   +/-   ##
=======================================
  Coverage   89.60%   89.61%           
=======================================
  Files         190      190           
  Lines        4185     4189    +4     
  Branches      626      626           
=======================================
+ Hits         3750     3754    +4     
  Misses        320      320           
  Partials      115      115           
Files Coverage Δ
...src/components/SelectInputV2/SearchBarDropdown.tsx 100.00% <100.00%> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a4c8dd6...6e1735a. Read the comment docs.

@matthprost matthprost merged commit 9801140 into main Apr 30, 2024
14 checks passed
@matthprost matthprost deleted the fix/autofocus-searchbar branch April 30, 2024 13:50
@github-actions github-actions bot mentioned this pull request Apr 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants