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(input): update input wrapper focus on padding click #1931

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix(input): update input wrapper focus on padding click #1931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 3 additions & 1 deletion core/components/atoms/input/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,13 +228,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
);

return (
// eslint-disable-next-line
saty2103 marked this conversation as resolved.
Show resolved Hide resolved
<div
data-test="DesignSystem-InputWrapper"
className={classes}
style={{ minWidth }}
onClick={() => ref.current?.focus()}
role="presentation"
role="textbox"
onBlur={() => setIsInputBlank(!ref.current?.value)}
tabIndex={0}
>
{inlineLabel && (
<div className="Input-inlineLabel">
Expand Down
63 changes: 42 additions & 21 deletions core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -32,8 +33,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left Input-icon--inputBlank"
Expand Down Expand Up @@ -68,8 +70,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -92,8 +95,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left"
Expand Down Expand Up @@ -128,8 +132,9 @@ exports[`Input component
<div
class="Input Input--large"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--large"
Expand All @@ -151,7 +156,8 @@ exports[`Input component
<div
class="Input Input--large"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<div
class="Input-inlineLabel"
Expand Down Expand Up @@ -183,8 +189,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -206,7 +213,8 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<div
class="Input-inlineLabel"
Expand Down Expand Up @@ -238,8 +246,9 @@ exports[`Input component
<div
class="Input Input--tiny"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--tiny"
Expand All @@ -261,7 +270,8 @@ exports[`Input component
<div
class="Input Input--tiny"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<div
class="Input-inlineLabel"
Expand Down Expand Up @@ -293,7 +303,8 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -315,8 +326,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -338,8 +350,9 @@ exports[`Input component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -361,8 +374,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -386,8 +400,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left"
Expand Down Expand Up @@ -423,8 +438,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -448,8 +464,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left"
Expand Down Expand Up @@ -485,8 +502,9 @@ exports[`Input component
<div
class="Input Input--regular Input--error"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -508,8 +526,9 @@ exports[`Input component
<div
class="Input Input--regular Input--error"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left Input-icon--error"
Expand Down Expand Up @@ -543,8 +562,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
class="Input-input Input-input--regular"
Expand All @@ -568,8 +588,9 @@ exports[`Input component
<div
class="Input Input--regular Input--disabled"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<div
class="Input-icon Input-icon--left"
Expand Down
9 changes: 8 additions & 1 deletion core/components/atoms/metricInput/MetricInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -262,7 +262,14 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
const actionButtonSize = size === 'large' ? 'regular' : 'tiny';

return (
<div data-test="DesignSystem-MetricInputWrapper" className={classes} onKeyDown={onKeyDown} role="presentation">
<div
data-test="DesignSystem-MetricInputWrapper"
className={classes}
onKeyDown={onKeyDown}
role="textbox"
onClick={() => ref.current?.focus()}
tabIndex={0}
>
{icon && (
<Icon
data-test="DesignSystem-MetricInput--icon"
Expand Down
13 changes: 13 additions & 0 deletions core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -241,3 +241,16 @@ describe('MetricInput component with props showActionButton', () => {
expect(queryByTestId('DesignSystem-MetricInput--downIcon')).not.toBeInTheDocument();
});
});

describe('MetricInput component', () => {
it('has focus state when MetricInputWrapper is clicked', () => {
const { getByTestId } = render(<MetricInput />);
const metricInputWrapper = getByTestId('DesignSystem-MetricInputWrapper');
const metricInput = getByTestId('DesignSystem-MetricInput');

metricInput.focus = FunctionValue;
saty2103 marked this conversation as resolved.
Show resolved Hide resolved
fireEvent.click(metricInputWrapper);

expect(metricInput.focus).toHaveBeenCalled();
});
});
12 changes: 8 additions & 4 deletions core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ exports[`MetricInput component
<div
class="MetricInput MetricInput--regular"
data-test="DesignSystem-MetricInputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<i
class="material-icons material-icons-rounded Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
Expand Down Expand Up @@ -77,7 +78,8 @@ exports[`MetricInput component
<div
class="MetricInput MetricInput--regular MetricInput--error"
data-test="DesignSystem-MetricInputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<i
class="material-icons material-icons-rounded Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
Expand Down Expand Up @@ -146,7 +148,8 @@ exports[`MetricInput component
<div
class="MetricInput MetricInput--large"
data-test="DesignSystem-MetricInputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<span
class="Text Text--subtle Text--large mr-5"
Expand Down Expand Up @@ -220,7 +223,8 @@ exports[`MetricInput component
<div
class="MetricInput MetricInput--regular"
data-test="DesignSystem-MetricInputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<span
class="Text Text--subtle Text--regular mr-4"
Expand Down
3 changes: 2 additions & 1 deletion core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,9 @@ exports[`Input Mask component
<div
class="Input Input--regular"
data-test="DesignSystem-InputWrapper"
role="presentation"
role="textbox"
style="min-width: 256px;"
tabindex="0"
>
<input
autocomplete="off"
Expand Down
3 changes: 2 additions & 1 deletion core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,8 @@ exports[`Pagination component
<div
class="MetricInput MetricInput--regular Pagination-MetricInput"
data-test="DesignSystem-MetricInputWrapper"
role="presentation"
role="textbox"
tabindex="0"
>
<input
class="MetricInput-input MetricInput-input--regular"
Expand Down
Loading
Loading