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

Address input bugs #122

Open
wants to merge 5 commits into
base: beta
Choose a base branch
from
Open

Address input bugs #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3ceff8b
fix: reset validity when setting value to undefined #118
jordanjones243 Dec 16, 2024
e2a72dc
fix: validate each individual attribute #119
jordanjones243 Dec 16, 2024
73eebea
fix: remove any instances of type=numeric #120
jordanjones243 Dec 16, 2024
87a6f60
fix: update layout to match figma #79
jordanjones243 Dec 17, 2024
8845302
perf: remove all references of isValid attribute
jordanjones243 Dec 17, 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
0 components/input/apiExamples/maxNumeric.html → components/input/apiExamples/maxNumber.html
View file
Open in desktop
File renamed without changes.
0 components/input/apiExamples/minNumeric.html → components/input/apiExamples/minNumber.html
View file
Open in desktop
File renamed without changes.
5 changes: 2 additions & 3 deletions components/input/docs/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,11 @@ Generate unique names for dependency components.
| `helpText` | `helpText` | `String` | | Deprecated, see `slot`. |
| `icon` | `icon` | `Boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
| `id` | `id` | `String` | | Sets the unique ID of the element. |
| `isValid` | `isValid` | `String` | false | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. |
| `label` | `label` | `String` | "Input label is undefined" | Deprecated, see `slot`. |
| `lang` | `lang` | `String` | | defines the language of an element. |
| `max` | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
| `max` | `max` | `String` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
| `maxLength` | `maxLength` | `Number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
| `min` | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
| `min` | `min` | `String` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
| `minLength` | `minLength` | `Number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
| `name` | `name` | `String` | | Populates the `name` attribute on the input. |
| `noValidate` | `noValidate` | `Boolean` | false | If set, disables auto-validation on blur. |
Expand Down
16 changes: 8 additions & 8 deletions components/input/docs/partials/api.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ Note: Setting the `value` to `undefined` will also reset the element.

### Max <a name="max"></a>

Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `numeric` or any date format.
Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.

The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails.

Expand All @@ -142,24 +142,24 @@ The `max` attribute should be used in combination with the `setCustomValidityRan

</auro-accordion>

#### Numeric Example
#### Number Example

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumeric.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumber.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumeric.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumber.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>

### Min <a name="min"></a>

Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for numeric or any date format.
Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.

The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails.

Expand All @@ -178,17 +178,17 @@ The `min` attribute should be used in combination with the `setCustomValidityRan

</auro-accordion>

#### Numeric Example
#### Number Example

<div class="exampleWrapper">
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumeric.html) -->
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumber.html) -->
<!-- AURO-GENERATED-CONTENT:END -->
</div>

<auro-accordion alignRight>
<span slot="trigger">See code</span>

<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumeric.html) -->
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumber.html) -->
<!-- AURO-GENERATED-CONTENT:END -->

</auro-accordion>
Expand Down
31 changes: 12 additions & 19 deletions components/input/src/base-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,11 @@ import AuroFormValidation from '@auro-formkit/form-validation';
* @attr {String} helpText - Deprecated, see `slot`.
* @attr {Boolean} icon - If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
* @attr {String} id - Sets the unique ID of the element.
* @attr {String} isValid - (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer.
* @attr {String} label - Deprecated, see `slot`.
* @attr {String} lang - defines the language of an element.
* @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
* @attr {String} max - The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
* @attr {Number} maxLength - The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
* @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats.
* @attr {String} min - The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
* @attr {Number} minLength - The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`.
* @attr {String} name - Populates the `name` attribute on the input.
* @attr {Boolean} noValidate - If set, disables auto-validation on blur.
Expand Down Expand Up @@ -78,8 +77,6 @@ export default class BaseInput extends LitElement {
constructor() {
super();

this.isValid = false;

this.icon = false;
this.disabled = false;
this.required = false;
Expand Down Expand Up @@ -200,10 +197,6 @@ export default class BaseInput extends LitElement {
reflect: true
},
errorMessage: { type: String },
isValid: {
type: String,
reflect: true
},
validity: {
type: String,
reflect: true
Expand Down Expand Up @@ -247,7 +240,7 @@ export default class BaseInput extends LitElement {
delimiter: ''
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -256,7 +249,7 @@ export default class BaseInput extends LitElement {
creditCard: true
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -271,7 +264,7 @@ export default class BaseInput extends LitElement {
]
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -286,7 +279,7 @@ export default class BaseInput extends LitElement {
]
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -299,7 +292,7 @@ export default class BaseInput extends LitElement {
]
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -312,7 +305,7 @@ export default class BaseInput extends LitElement {
]
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -322,7 +315,7 @@ export default class BaseInput extends LitElement {
datePattern: ['Y']
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -332,7 +325,7 @@ export default class BaseInput extends LitElement {
datePattern: ['y']
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand All @@ -342,7 +335,7 @@ export default class BaseInput extends LitElement {
datePattern: ['m']
};

this.inputMode = 'numeric';
this.inputMode = 'number';

break;

Expand Down Expand Up @@ -608,7 +601,7 @@ export default class BaseInput extends LitElement {
* @return {void}
*/
handleInput() {
// Prevent non-numeric characters from being entered on credit card fields.
// Prevent non-number characters from being entered on credit card fields.
if (this.type === 'credit-card') {
this.inputElement.value = this.inputElement.value.replace(/[\D]/gu, '');
}
Expand Down
6 changes: 6 additions & 0 deletions components/input/src/styles/input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,9 @@ input {
pointer-events: none;
}
}

:host([bordered]) {
input {
padding: var(--ds-size-400, $ds-size-400) 0 var(--ds-size-100, $ds-size-100);
}
}
3 changes: 1 addition & 2 deletions components/input/src/styles/label.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,8 @@ label {
}
}

// active label for non-bordered inputs
@mixin active-label {
top: var(--ds-size-25, $ds-size-25);
top: var(--ds-size-100, $ds-size-100);
font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
transform: unset;
}
Expand Down
3 changes: 1 addition & 2 deletions components/input/test/auro-input.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ describe('auro-input', () => {

await elementUpdated(el);

expect(el.isValid).to.not.be.true;
expect(text).to.contain(`that is not a valid entry`);

input.focus();
Expand All @@ -58,7 +57,7 @@ describe('auro-input', () => {

await elementUpdated(el);

expect(el.isValid).to.be.true;
expect(el.getAttribute('validity')).to.equal('valid');
});

it('clears the value when clicked', async () => {
Expand Down
18 changes: 11 additions & 7 deletions packages/form-validation/src/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,15 @@ export default class AuroFormValidation {
elem.validity = 'badInput';
elem.setCustomValidity = elem.setCustomValidityBadInput || '';
}
} else if (elem.value && elem.value.length > 0 && elem.value.length < elem.minLength) {
}

// Length > 0 is required to prevent the error message from showing when the input is empty
if (elem.value?.length > 0 && elem.value?.length < elem.minLength) {
elem.validity = 'tooShort';
elem.setCustomValidity = elem.setCustomValidityTooShort || '';
} else if (elem.value && elem.value.length > elem.maxLength) {
}

if (elem.value?.length > elem.maxLength) {
elem.validity = 'tooLong';
elem.setCustomValidity = elem.setCustomValidityTooLong || '';
}
Expand All @@ -55,7 +60,7 @@ export default class AuroFormValidation {
elem.validity = 'tooShort';
elem.setCustomValidity = elem.setCustomValidityForType || '';
}
} else if (elem.type === 'number' || elem.type === 'numeric') { // 'numeric` is a deprecated alias for number'
} else if (elem.type === 'number') {
if (elem.max !== undefined && Number(elem.max) < Number(elem.value)) {
elem.validity = 'rangeOverflow';
elem.setCustomValidity = elem.getAttribute('setCustomValidityRangeOverflow') || '';
Expand Down Expand Up @@ -144,6 +149,9 @@ export default class AuroFormValidation {
this.validateType(elem);
this.validateAttributes(elem);
}
} else if (elem.value === undefined) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. validationShouldRun is false, but why do we touch validity?
  2. maybe validationShouldRun should be fixed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are touching validity to reset it. In the case of this fix, users expect that validity state to reset when setting the element to value=undefined. Since validationShouldRun is false, it skips the validation logic and resets the validity state.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should we not reset the validity always at the beginning of the validate function? as elem.value is not only case that we want to reset.

// Reset the validity state if input is programmatically reset
elem.validity = undefined;
}

if (this.auroInputElements && this.auroInputElements.length > 0) {
Expand All @@ -160,14 +168,10 @@ export default class AuroFormValidation {

if (validationShouldRun || elem.hasAttribute('error')) {
if (elem.validity && elem.validity !== 'valid') {
elem.isValid = false;

// Use the validity message override if it is declared
if (elem.ValidityMessageOverride) {
elem.setCustomValidity = elem.ValidityMessageOverride;
}
} else {
elem.isValid = true;
}

this.getErrorMessage(elem);
Expand Down
Loading