Skip to content
Permalink
Browse files
fix(form): Select correctly updates for the dense spec
Relates to #1089
  • Loading branch information
mlaursen committed Mar 22, 2021
1 parent 25178d7 commit 2930595
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 0 deletions.
@@ -339,6 +339,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(function Select(
aria-disabled={disabled || undefined}
ref={refHandler}
role="button"
dense={dense}
tabIndex={disabled ? undefined : 0}
label={!!label}
onFocus={handleFocus}
@@ -40,6 +40,15 @@ describe("Select", () => {

rerender(<Select {...PROPS} placeholder="Choose..." label="Label" />);
expect(container).toMatchSnapshot();

rerender(<Select {...PROPS} dense />);
expect(container).toMatchSnapshot();

rerender(<Select {...PROPS} dense label="Label" />);
expect(container).toMatchSnapshot();

rerender(<Select {...PROPS} dense label="Label" placeholder="Choose..." />);
expect(container).toMatchSnapshot();
});

it("should update the label and select class names when focused as well as hiding the placeholder text", () => {
@@ -106,6 +106,116 @@ exports[`Select should render correctly 3`] = `
</div>
`;

exports[`Select should render correctly 4`] = `
<div>
<div
aria-haspopup="listbox"
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense rmd-text-field-container--outline-right rmd-select"
id="select"
role="button"
tabindex="0"
>
<span
class="rmd-select__value"
id="select-display-value"
/>
<input
id="select-value"
type="hidden"
value=""
/>
<span
class="rmd-text-field-addon rmd-text-field-addon--presentational"
>
<i
aria-hidden="true"
class="rmd-icon rmd-icon--font material-icons"
>
arrow_drop_down
</i>
</span>
</div>
</div>
`;

exports[`Select should render correctly 5`] = `
<div>
<div
aria-haspopup="listbox"
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
id="select"
role="button"
tabindex="0"
>
<span
class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
id="select-label"
>
Label
</span>
<span
class="rmd-select__value"
id="select-display-value"
/>
<input
id="select-value"
type="hidden"
value=""
/>
<span
class="rmd-text-field-addon rmd-text-field-addon--presentational"
>
<i
aria-hidden="true"
class="rmd-icon rmd-icon--font material-icons"
>
arrow_drop_down
</i>
</span>
</div>
</div>
`;

exports[`Select should render correctly 6`] = `
<div>
<div
aria-haspopup="listbox"
class="rmd-text-field-container rmd-text-field-container--outline rmd-text-field-container--hoverable rmd-text-field-container--dense-label rmd-text-field-container--outline-right rmd-select"
id="select"
role="button"
tabindex="0"
>
<span
class="rmd-label rmd-floating-label rmd-floating-label--dense rmd-select__label"
id="select-label"
>
Label
</span>
<span
class="rmd-select__value rmd-select__value--placeholder"
id="select-display-value"
>
Choose...
</span>
<input
id="select-value"
type="hidden"
value=""
/>
<span
class="rmd-text-field-addon rmd-text-field-addon--presentational"
>
<i
aria-hidden="true"
class="rmd-icon rmd-icon--font material-icons"
>
arrow_drop_down
</i>
</span>
</div>
</div>
`;

exports[`Select should update the label and select class names when focused as well as hiding the placeholder text 1`] = `
<div>
<div

0 comments on commit 2930595

Please sign in to comment.