Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 9e4a089

Browse files
codebender828codebender828
authored
Merge branch 'develop' into improve-theme-types
2 parents 3a0b275 + 361264b commit 9e4a089

File tree

5 files changed

+261
-2
lines changed

5 files changed

+261
-2
lines changed

‎.changeset/real-cycles-hammer.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@chakra-ui/vue": patch
3+
"@chakra-ui/nuxt": patch
4+
---
5+
6+
fix(select): prevent duplicated ID on wrapper + input

‎packages/chakra-ui-core/src/CSelect/CSelect.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -166,6 +166,12 @@ const CSelect = {
166166
position: 'relative',
167167
width: '100%'
168168
}
169+
},
170+
filteredComputedAttrs () {
171+
// filter ID from attributes to not insert it on both the wrapper
172+
// and the select itself. See https://github.com/chakra-ui/chakra-ui-vue/issues/484
173+
const removeIdFromAttrs = Object.entries(this.computedAttrs).filter(([key, _attr]) => key !== 'id')
174+
return Object.fromEntries(removeIdFromAttrs)
169175
}
170176
},
171177
render (h) {
@@ -174,7 +180,7 @@ const CSelect = {
174180
return h('div', {
175181
class: [this.className],
176182
attrs: {
177-
...this.computedAttrs,
183+
...this.filteredComputedAttrs,
178184
'data-chakra-component': 'CSelect'
179185
}
180186
}, [

‎packages/chakra-ui-core/src/CSelect/CSelect.stories.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ storiesOf('UI | Select', module)
77
components: { CBox, CSelect },
88
template: `
99
<CBox mb="3" w="300px">
10-
<CSelect v-model="value" placeholder="Select option">
10+
<CSelect v-model="value" id="test" placeholder="Select option">
1111
<option value="option1">Option 1</option>
1212
<option value="option2">Option 2</option>
1313
<option value="option3">Option 3</option>
@@ -60,3 +60,28 @@ storiesOf('UI | Select', module)
6060
/>
6161
`
6262
}))
63+
.add('Disabled select', () => ({
64+
components: { CSelect },
65+
template: `
66+
<CBox mb="3" w="300px">
67+
<CSelect v-model="value" id="test" :isDisabled="true" placeholder="Select option">
68+
<option value="option1">Option 1</option>
69+
<option value="option2">Option 2</option>
70+
<option value="option3">Option 3</option>
71+
</CSelect>
72+
</CBox>
73+
`,
74+
data () {
75+
return {
76+
value: 'option3'
77+
}
78+
},
79+
watch: {
80+
value (newValue) {
81+
this.action('Selected value', newValue)
82+
}
83+
},
84+
methods: {
85+
action: action()
86+
}
87+
}))

‎packages/chakra-ui-core/src/CSelect/tests/CSelect.test.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { CSelect } from '../..'
2+
import { render, screen } from '@/tests/test-utils'
3+
4+
const renderComponent = (props) => {
5+
const inlineAttrs = (props && props.inlineAttrs) || ''
6+
const base = {
7+
data: () => ({ value: 'option1' }),
8+
components: { CSelect },
9+
template: `<CSelect data-testid="select" id="selectTest" placeholder="input placeholder" v-model="value" ${inlineAttrs}>
10+
<option value="option1">Option 1</option>
11+
<option value="option2">Option 2</option>
12+
<option value="option3">Option 3</option>
13+
</CSelect>`,
14+
...props
15+
}
16+
return render(base)
17+
}
18+
19+
test('should render correctly', () => {
20+
const { asFragment } = renderComponent()
21+
expect(asFragment()).toMatchSnapshot()
22+
})
23+
24+
test('disabled select renders correctly', () => {
25+
renderComponent({ inlineAttrs: 'isDisabled' })
26+
const select = screen.getByRole('combobox')
27+
28+
expect(select).toHaveAttribute('disabled')
29+
})
30+
31+
test('passes the ID directly to the select and not to the wrapper', () => {
32+
renderComponent()
33+
const select = screen.getByRole('combobox')
34+
const selectWrapper = screen.getByTestId('select')
35+
36+
expect(select).toHaveAttribute('id')
37+
expect(selectWrapper).not.toHaveAttribute('id')
38+
})

‎packages/chakra-ui-core/src/CSelect/tests/__snapshots__/CSelect.test.js.snap

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`should render correctly 1`] = `
4+
<DocumentFragment>
5+
.emotion-0 {
6+
position: relative;
7+
width: 100%;
8+
}
9+
10+
.emotion-1 {
11+
width: 100%;
12+
display: -webkit-box;
13+
display: -webkit-flex;
14+
display: -ms-flexbox;
15+
display: flex;
16+
-webkit-align-items: center;
17+
-webkit-box-align: center;
18+
-ms-flex-align: center;
19+
align-items: center;
20+
position: relative;
21+
-webkit-transition: all 0.2s;
22+
transition: all 0.2s;
23+
outline: 2px solid transparent;
24+
outline-offset: 2px;
25+
-webkit-appearance: none;
26+
-moz-appearance: none;
27+
-ms-appearance: none;
28+
appearance: none;
29+
font-size: var(--fontSizes-md);
30+
-webkit-padding-start: var(--space-4);
31+
padding-inline-start: var(--space-4);
32+
-webkit-padding-end: var(--space-4);
33+
padding-inline-end: var(--space-4);
34+
height: var(--sizes-10);
35+
line-height: var(--lineHeights-normal);
36+
border-radius: var(--radii-md);
37+
border-width: 1px;
38+
border-color: inherit;
39+
background: var(--colors-white);
40+
font-family: var(--fonts-body);
41+
padding-right: 2rem;
42+
padding-bottom: var(--space-px);
43+
color: inherit;
44+
}
45+
46+
.emotion-1[aria-readonly=true],
47+
.emotion-1[readonly],
48+
.emotion-1[data-readonly] {
49+
background: var(--colors-transparent);
50+
box-shadow: none!important;
51+
-webkit-user-select: all;
52+
-moz-user-select: all;
53+
-ms-user-select: all;
54+
user-select: all;
55+
}
56+
57+
.emotion-1:hover,
58+
.emotion-1[data-hover] {
59+
border-color: var(--colors-gray-300);
60+
}
61+
62+
.emotion-1[disabled],
63+
.emotion-1[aria-disabled=true],
64+
.emotion-1[data-disabled] {
65+
opacity: 0.4;
66+
cursor: not-allowed;
67+
}
68+
69+
.emotion-1:focus,
70+
.emotion-1[data-focus] {
71+
z-index: 1;
72+
border-color: #7db1ff;
73+
box-shadow: 0 0 0 1px #7db1ff;
74+
}
75+
76+
.emotion-1[aria-invalid=true],
77+
.emotion-1[data-invalid] {
78+
border-color: #e66673;
79+
box-shadow: 0 0 0 1px #e66673;
80+
}
81+
82+
.emotion-2 {
83+
color: inherit;
84+
position: absolute;
85+
display: -webkit-inline-box;
86+
display: -webkit-inline-flex;
87+
display: -ms-inline-flexbox;
88+
display: inline-flex;
89+
width: 1.5rem;
90+
height: 100%;
91+
-webkit-align-items: center;
92+
-webkit-box-align: center;
93+
-ms-flex-align: center;
94+
align-items: center;
95+
-webkit-box-pack: center;
96+
-ms-flex-pack: center;
97+
-webkit-justify-content: center;
98+
justify-content: center;
99+
right: 0.5rem;
100+
top: 50%;
101+
pointer-events: none;
102+
z-index: 2;
103+
-webkit-transform: translateY(-50%);
104+
-moz-transform: translateY(-50%);
105+
-ms-transform: translateY(-50%);
106+
transform: translateY(-50%);
107+
}
108+
109+
.emotion-3 {
110+
-webkit-flex-shrink: 0;
111+
-ms-flex-negative: 0;
112+
flex-shrink: 0;
113+
-webkit-backface-visibility: hidden;
114+
backface-visibility: hidden;
115+
}
116+
117+
.emotion-3:not(:root) {
118+
overflow: hidden;
119+
}
120+
121+
.emotion-4 {
122+
width: var(--sizes-5);
123+
height: var(--sizes-5);
124+
display: inline-block;
125+
vertical-align: middle;
126+
}
127+
128+
<div
129+
class="emotion-0"
130+
data-chakra-component="CSelect"
131+
data-testid="select"
132+
>
133+
<select
134+
class="emotion-1"
135+
data-chakra-component="CSelectInput"
136+
datatestid="select"
137+
id="selectTest"
138+
value="option1"
139+
>
140+
<option
141+
value=""
142+
>
143+
input placeholder
144+
</option>
145+
<option
146+
value="option1"
147+
>
148+
Option 1
149+
</option>
150+
151+
<option
152+
value="option2"
153+
>
154+
Option 2
155+
</option>
156+
157+
<option
158+
value="option3"
159+
>
160+
Option 3
161+
</option>
162+
</select>
163+
<div
164+
class="emotion-2"
165+
data-chakra-component="CSelectIconWrapper"
166+
>
167+
<svg
168+
aria-hidden="true"
169+
class="emotion-3 emotion-4 emotion-5"
170+
data-chakra-component="CIcon"
171+
role="presentation"
172+
viewBox="0 0 24 24"
173+
>
174+
175+
176+
<path
177+
d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
178+
fill="currentColor"
179+
/>
180+
</svg>
181+
</div>
182+
</div>
183+
</DocumentFragment>
184+
`;

0 commit comments

Comments
 (0)