Skip to content

Commit faa9feb

Browse files
ricardogarimricardogarim
authored
fix(fuselage): Select's hidden select causing a layout shift (#1980)
1 parent a0d2a3f commit faa9feb

3 files changed

Lines changed: 89 additions & 78 deletions

File tree

‎.changeset/better-snakes-post.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@rocket.chat/fuselage': patch
3+
---
4+
5+
Fixed `Select` inflating ancestor scrollHeight inside non-positioned containers (collapsed `Accordion`, `Modal`, `Field`, etc.). Regression from 0.77.0 (#1939).

‎packages/fuselage/src/components/Select/SelectAria.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,13 +60,15 @@ export const SelectAria = forwardRef<HTMLElement, SelectAriaProps<object>>(
6060

6161
return (
6262
<>
63-
<HiddenSelect
64-
state={state}
65-
triggerRef={ref}
66-
label={props.label}
67-
name={props.name}
68-
isDisabled={isDisabled}
69-
/>
63+
<Box position='relative' size={0}>
64+
<HiddenSelect
65+
state={state}
66+
triggerRef={ref}
67+
label={props.label}
68+
name={props.name}
69+
isDisabled={isDisabled}
70+
/>
71+
</Box>
7072
<SelectTrigger
7173
{...mergeProps(focusProps, triggerProps)}
7274
ref={mergedRef}

‎packages/fuselage/src/components/Select/__snapshots__/Select.spec.tsx.snap‎

Lines changed: 75 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,79 +4,83 @@ exports[`[Select Component] renders without crashing 1`] = `
44
<body>
55
<div>
66
<div
7-
aria-hidden="true"
8-
data-a11y-ignore="aria-hidden-focus"
9-
data-react-aria-prevent-focus="true"
10-
data-testid="hidden-select-container"
11-
style="border: 0px; clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
7+
class="rcx-box rcx-box--full rcx-css-1mbgoc8"
128
>
13-
<label>
14-
<select
15-
tabindex="-1"
16-
>
17-
<option />
18-
<option
19-
value="1"
20-
>
21-
1
22-
</option>
23-
<option
24-
value="2"
25-
>
26-
2
27-
</option>
28-
<option
29-
value="3"
30-
>
31-
3
32-
</option>
33-
<option
34-
value="4"
35-
>
36-
4
37-
</option>
38-
<option
39-
value="5"
40-
>
41-
5
42-
</option>
43-
<option
44-
value="6"
45-
>
46-
6
47-
</option>
48-
<option
49-
value="7"
50-
>
51-
7
52-
</option>
53-
<option
54-
value="8"
55-
>
56-
8
57-
</option>
58-
<option
59-
value="9"
60-
>
61-
9
62-
</option>
63-
<option
64-
value="10"
65-
>
66-
10
67-
</option>
68-
<option
69-
value="11"
70-
>
71-
11
72-
</option>
73-
<option
74-
value="12"
9+
<div
10+
aria-hidden="true"
11+
data-a11y-ignore="aria-hidden-focus"
12+
data-react-aria-prevent-focus="true"
13+
data-testid="hidden-select-container"
14+
style="border: 0px; clip-path: inset(50%); height: 1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
15+
>
16+
<label>
17+
<select
18+
tabindex="-1"
7519
>
76-
12
77-
</option>
78-
</select>
79-
</label>
20+
<option />
21+
<option
22+
value="1"
23+
>
24+
1
25+
</option>
26+
<option
27+
value="2"
28+
>
29+
2
30+
</option>
31+
<option
32+
value="3"
33+
>
34+
3
35+
</option>
36+
<option
37+
value="4"
38+
>
39+
4
40+
</option>
41+
<option
42+
value="5"
43+
>
44+
5
45+
</option>
46+
<option
47+
value="6"
48+
>
49+
6
50+
</option>
51+
<option
52+
value="7"
53+
>
54+
7
55+
</option>
56+
<option
57+
value="8"
58+
>
59+
8
60+
</option>
61+
<option
62+
value="9"
63+
>
64+
9
65+
</option>
66+
<option
67+
value="10"
68+
>
69+
10
70+
</option>
71+
<option
72+
value="11"
73+
>
74+
11
75+
</option>
76+
<option
77+
value="12"
78+
>
79+
12
80+
</option>
81+
</select>
82+
</label>
83+
</div>
8084
</div>
8185
<button
8286
aria-expanded="false"

0 commit comments

Comments
 (0)