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

Jump to bottom

fix: select components #1052

Merged
merged 14 commits into from
May 20, 2024
Merged

fix: select components #1052

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
3d9557f
add number of months
mbauchet Jul 30, 2023
75a9427
add number of mnths
mbauchet Jul 30, 2023
6826c21
Merge remote-tracking branch 'upstream/main'
mbauchet Sep 9, 2023
81b6fa1
remove number of month
mbauchet Sep 13, 2023
37ac607
Merge remote-tracking branch 'tremor/main'
Sep 26, 2023
6446f55
Merge remote-tracking branch 'upstream/main'
mbauchet Oct 29, 2023
a169804
Merge remote-tracking branch 'upstream/main'
mbauchet Nov 9, 2023
00cf809
Merge remote-tracking branch 'tremor/main'
mbauchet Dec 19, 2023
c5c20df
Merge remote-tracking branch 'tremor/main'
mbauchet Jan 14, 2024
589c072
Merge remote-tracking branch 'tremor/main'
Feb 8, 2024
cf49527
fix lint
Apr 16, 2024
8ee4a1c
Merge remote-tracking branch 'tremor/main'
mbauchet May 20, 2024
abc3f89
fix select zIndex + add autocomplete props to searchselect
mbauchet May 20, 2024
9ef72f8
remove required false
mbauchet May 20, 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: 1 addition & 1 deletion src/components/input-elements/MultiSelect/MultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>((props,
<select
title="multi-select-hidden"
required={required}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
value={selectedValue}
onChange={(e) => {
e.preventDefault();
Expand Down
15 changes: 9 additions & 6 deletions src/components/input-elements/SearchSelect/SearchSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export interface SearchSelectProps extends React.HTMLAttributes<HTMLInputElement
errorMessage?: string;
enableClear?: boolean;
children: React.ReactNode;
autoComplete?: string;
}

const makeSelectClassName = makeClassName("SearchSelect");
Expand All @@ -50,9 +51,10 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
children,
className,
id,
autoComplete = "off",
...other
} = props;
const comboboxButtonRef = useRef<HTMLButtonElement | null>(null);
const comboboxInputRef = useRef<HTMLInputElement | null>(null);

const [searchQuery, setSearchQuery] = useInternalState("", searchValue);
const [selectedValue, setSelectedValue] = useInternalState(defaultValue, value);
Expand Down Expand Up @@ -88,7 +90,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
<select
title="search-select-hidden"
required={required}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
value={selectedValue}
onChange={(e) => {
e.preventDefault();
Expand All @@ -97,8 +99,8 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
disabled={disabled}
id={id}
onFocus={() => {
const comboboxButton = comboboxButtonRef.current;
if (comboboxButton) comboboxButton.click();
const comboboxInput = comboboxInputRef.current;
if (comboboxInput) comboboxInput.focus();
}}
>
<option className="hidden" value="" disabled hidden>
Expand Down Expand Up @@ -131,7 +133,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
>
{({ value }) => (
<>
<Combobox.Button ref={comboboxButtonRef} className="w-full">
<Combobox.Button className="w-full">
{Icon && (
<span
className={tremorTwMerge(
Expand All @@ -153,6 +155,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
)}

<Combobox.Input
ref={comboboxInputRef}
className={tremorTwMerge(
// common
"w-full outline-none text-left whitespace-nowrap truncate rounded-tremor-default focus:ring-2 transition duration-100 text-tremor-default pr-14 border py-2",
Expand All @@ -172,7 +175,7 @@ const SearchSelect = React.forwardRef<HTMLInputElement, SearchSelectProps>((prop
setSearchQuery(event.target.value);
}}
displayValue={(value: string) => valueToNameMapping.get(value) ?? ""}
autoComplete="off"
autoComplete={autoComplete}
/>
<div className={tremorTwMerge("absolute inset-y-0 right-0 flex items-center pr-2.5")}>
<ArrowDownHeadIcon
Expand Down
2 changes: 1 addition & 1 deletion src/components/input-elements/Select/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const Select = React.forwardRef<HTMLInputElement, SelectProps>((props, ref) => {
<select
title="select-hidden"
required={required}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 z-0 opacity-0")}
className={tremorTwMerge("h-full w-full absolute left-0 top-0 -z-10 opacity-0")}
value={selectedValue}
onChange={(e) => {
e.preventDefault();
Expand Down
Loading