lightning-base-components 1.18.6-alpha → 1.18.7-alpha

package/src/lightning/input/input.js

@@ -1,4 +1,6 @@
 import labelA11yTriggerText from '@salesforce/label/LightningColorPicker.a11yTriggerText';
+import labelInputFileBodyText from '@salesforce/label/LightningInputFile.bodyText';
+import labelInputFileButtonLabel from '@salesforce/label/LightningInputFile.buttonLabel';
 import labelMessageToggleActive from '@salesforce/label/LightningControl.activeCapitalized';
 import labelMessageToggleInactive from '@salesforce/label/LightningControl.inactiveCapitalized';
 import labelRequired from '@salesforce/label/LightningControl.required';
@@ -11,17 +13,20 @@ import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helpt
 import userTimeZone from '@salesforce/i18n/timeZone';
 import formFactor from '@salesforce/client/formFactor';
 
-import { api, track } from 'lwc';
-import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningElement, api, track } from 'lwc';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
+    getRealDOMId,
     reflectAttribute,
+    isSafari,
     isNativeComponent,
+    isNotUndefinedOrNull,
     isUndefinedOrNull,
     normalizeAriaAttribute,
     normalizeBoolean,
+    normalizeKeyValue,
     normalizeString,
     synchronizeAttrs,
     decorateInputForDragon,
@@ -29,6 +34,7 @@ import {
     computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import AriaObserver from 'lightning/ariaObserver';
+import { normalizeInput } from './normalize';
 import {
     normalizeDate,
     normalizeDateTimeToUTC,
@@ -41,14 +47,26 @@ import {
     InteractingState,
     normalizeVariant,
     VARIANT,
-    normalizeInput,
-    isValidNumber,
-    isValidEmail,
-    isValidMultipleEmails,
 } from 'lightning/inputUtils';
+import {
+    calculateFractionDigitsFromStep,
+    formatNumber,
+    fromIsoDecimal,
+    hasValidNumberShortcut,
+    hasValidNumberSymbol,
+    increaseNumberByStep,
+    isValidNumber,
+    isValidNumberCharacter,
+    stringifyNumber,
+    toIsoDecimal,
+} from './numberUtil';
+import { isValidEmail, isValidMultipleEmails } from './emailUtil';
+import { InputSelectionCache } from './selection';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
+    inputFileBodyText: labelInputFileBodyText,
+    inputFileButtonLabel: labelInputFileButtonLabel,
     messageToggleActive: labelMessageToggleActive,
     messageToggleInactive: labelMessageToggleInactive,
     numberIncrementCounter: labelNumberIncrementCounter,
@@ -88,12 +106,13 @@ const VALID_NUMBER_FORMATTERS = [
     'percent-fixed',
     'currency',
 ];
+const DEFAULT_COLOR = '#000000';
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
 /**
  * Represents interactive controls that accept user input depending on the type attribute.
  */
-export default class LightningInput extends LightningShadowBaseClass {
+export default class LightningInput extends LightningElement {
     static delegatesFocus = true;
 
     /**
@@ -282,12 +301,12 @@ export default class LightningInput extends LightningShadowBaseClass {
     @track _ariaInvalid;
     @track _autocomplete;
 
-    _shouldShowHelpMessage = true;
-    _helpMessageChanged = false;
     _formatter = DEFAULT_FORMATTER;
     _showRawNumber = false;
     _initialValueSet = false;
+    _files = null;
     _rendered;
+    _selectionCache;
 
     constructor() {
         super();
@@ -295,11 +314,15 @@ export default class LightningInput extends LightningShadowBaseClass {
 
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
-        this._isNativeShadow = isNativeComponent(this);
+        this.isNative = isNativeComponent(this);
+
+        // The selection cache allows us an input to remember what text was selected
+        // in cases where we change the text on blur or in browsers (Safari) that
+        // don't track it properly.
+        this._selectionCache = new InputSelectionCache();
     }
 
     connectedCallback() {
-        super.connectedCallback();
         if (!this.ariaObserver) {
             this.ariaObserver = new AriaObserver(this);
         }
@@ -311,11 +334,15 @@ export default class LightningInput extends LightningShadowBaseClass {
 
         this.classList.add('slds-form-element');
 
-        this.updateClassListForVariant();
-        this.validateRequiredAttributes();
+        this._updateClassList();
+        this._validateRequiredAttributes();
 
         this.interactingState = new InteractingState();
         this.interactingState.onleave(() => this.reportValidity());
+
+        if (this.isTypeNumber) {
+            this._updateNumberValue(this._value);
+        }
     }
 
     disconnectedCallback() {
@@ -329,15 +356,18 @@ export default class LightningInput extends LightningShadowBaseClass {
     }
 
     renderedCallback() {
+        // For W-7962838: In Safari, focus doesn't scroll input into view.
+        // Attach the event listener used to cache the selected text when selection changes.
+        if (isSafari) {
+            this._inputElement.addEventListener(
+                'select',
+                this.handleSelect.bind(this)
+            );
+        }
+
         if (this.isConnected) {
             this.ariaObserver.sync(this.isNativeShadow);
 
-            // If the help message changed, the help message element needs to be (un)related
-            if (this._helpMessageChanged) {
-                this.connectAriaDescribedBy();
-                this._helpMessageChanged = false;
-            }
-
             if (!this._rendered) {
                 this.connectAriaDescribedBy();
                 this.connectAriaLabelledBy();
@@ -348,6 +378,10 @@ export default class LightningInput extends LightningShadowBaseClass {
         if (!this._initialValueSet && this._inputElement) {
             this._rendered = true;
 
+            if (this.isTypeNumber) {
+                this._numberRawValue = fromIsoDecimal(this._value);
+            }
+
             this._setInputValue(this._displayedValue);
             if (this.isTypeCheckable) {
                 this._inputElement.checked = this._checked;
@@ -363,7 +397,17 @@ export default class LightningInput extends LightningShadowBaseClass {
      * @type {number}
      *
      */
-    @api formatFractionDigits;
+    @api
+    get formatFractionDigits() {
+        return this._formatFractionDigits;
+    }
+
+    set formatFractionDigits(value) {
+        this._formatFractionDigits = value;
+        if (this._rendered && this.isTypeNumber) {
+            this._setInputValue(this._displayedValue);
+        }
+    }
 
     /**
      * A space-separated list of element IDs whose presence or content is controlled by the
@@ -607,22 +651,15 @@ export default class LightningInput extends LightningShadowBaseClass {
      */
     @api
     get formatter() {
-        // Formatters are applicable to the number type
-        // If the primitive exists, retrieve value from primitive-input-simple
-        if (this.isTypeNumber && this._primitiveComponent) {
-            return this._primitiveComponent.formatter;
-        }
         return this._formatter;
     }
 
     set formatter(value) {
-        this._formatter = value;
-
-        // If the primitive exists, retrieve value from primitive-input-simple
-        // The primitive will normalize the value
-        if (this.isTypeNumber && this._primitiveComponent) {
-            this._primitiveComponent.formatter = this._formatter;
-        }
+        this._formatter = normalizeString(value, {
+            fallbackValue: DEFAULT_FORMATTER,
+            validValues: VALID_NUMBER_FORMATTERS,
+        });
+        this._updateInputDisplayValueIfTypeNumber();
     }
 
     /**
@@ -806,6 +843,7 @@ export default class LightningInput extends LightningShadowBaseClass {
         }
 
         this._updateProxyInputAttributes('step');
+        this._updateInputDisplayValueIfTypeNumber();
     }
 
     /**
@@ -827,11 +865,7 @@ export default class LightningInput extends LightningShadowBaseClass {
         this._checked = normalizeBoolean(value);
 
         if (this._rendered) {
-            if (this.isTypeCheckbox) {
-                this._primitiveComponent.checked = this._checked;
-            } else {
-                this._inputElement.checked = this._checked;
-            }
+            this._inputElement.checked = this._checked;
         }
 
         // Update proxy input should be set after _inputElement is updated.
@@ -862,29 +896,29 @@ export default class LightningInput extends LightningShadowBaseClass {
      */
     @api
     get value() {
-        if (this.isTypeSimple) {
-            const subcomponent = this._primitiveComponent;
-            if (subcomponent) {
-                return subcomponent.value;
-            }
-        }
         return this._value;
     }
 
     set value(value) {
-        // Setting value of a type='file' isn't allowed
-        if (!this.isTypeFile) {
-            this._value = normalizeInput(value);
-
-            if (this.isTypeSimple) {
-                const subcomponent = this._primitiveComponent;
-                if (subcomponent) {
-                    subcomponent.value = this._value;
-                }
+        const previousValue = this._value;
+
+        this._value = normalizeInput(value);
+
+        if (this._rendered && this.isTypeNumber) {
+            this._value = stringifyNumber(value);
+            // the extra check for whether the value has changed is done for cases
+            // when the same value is set back in a change handler, this is to avoid
+            // the raw number from changing formatting under the user
+            // (eg. if the user typed 1,000 we want to preserve that formatting as the user
+            // types the value)
+            if (this.validity.badInput || this._value !== previousValue) {
+                this._updateNumberValue(value);
             }
+        }
 
-            this._updateProxyInputAttributes('value');
-
+        this._updateProxyInputAttributes('value');
+        // Setting value of a type='file' isn't allowed
+        if (!this.isTypeFile) {
             // Again, due to the interop layer we need to check whether the value being set
             // is different, otherwise we're duplicating the sets on the input, which result
             // in different bugs like Japanese IME duplication of characters in Safari (likely a browser bug) or
@@ -915,7 +949,7 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
-        this.updateClassListForVariant();
+        this._updateClassList();
         reflectAttribute(this, 'variant', this._variant);
     }
 
@@ -1019,7 +1053,7 @@ export default class LightningInput extends LightningShadowBaseClass {
     @api
     get files() {
         if (this.isTypeFile) {
-            return this._primitiveComponent.files;
+            return this._files;
         }
         return null;
     }
@@ -1034,14 +1068,6 @@ export default class LightningInput extends LightningShadowBaseClass {
         return this._constraint.validity;
     }
 
-    /**
-     * Not moving selectionStart and selectionEnd to the inner component. Looks like
-     * one of the expected error/fail cases is that the component throws an error in the console,
-     * if the user attempts to set it on a non-supported type (like range, file, checkbox).
-     * That can only happen from `lightning-input`. To avoid duplicating code, it's best to keep
-     * this here.
-     */
-
     /**
      * Specifies the index of the first character to select in the input element.
      * This attribute is supported only for text type.
@@ -1116,13 +1142,9 @@ export default class LightningInput extends LightningShadowBaseClass {
             }
             if (this._rendered && !this.isNativeInput) {
                 this._inputElement.showHelpMessage(message);
-                return;
-            }
-            if (this._rendered && this.isTypePrimitiveInput) {
-                this._shouldShowHelpMessage = false;
-                this._helpMessageChanged = true;
+            } else {
+                this._helpMessage = message;
             }
-            this._helpMessage = message;
         });
     }
 
@@ -1155,47 +1177,195 @@ export default class LightningInput extends LightningShadowBaseClass {
         }
     }
 
-    get primitiveSelector() {
-        if (this.isTypeSimple) {
-            return 'lightning-primitive-input-simple';
+    get isNativeInput() {
+        return !(
+            this.isTypeDesktopDate ||
+            this.isTypeDesktopDateTime ||
+            this.isTypeDesktopTime
+        );
+    }
+
+    get computedAriaLabel() {
+        const ariaValues = [];
+
+        // merge all date & time arias on mobile since it's displayed as a single field
+        if (this.isTypeMobileDateTime) {
+            ariaValues.push(this.dateAriaLabel);
+            ariaValues.push(this.timeAriaLabel);
         }
-        if (this.isTypeCheckboxButton) {
-            return 'lightning-primitive-input-checkbox-button';
+        if (this.ariaLabel) {
+            ariaValues.push(this.ariaLabel);
         }
+
+        return normalizeAriaAttribute(ariaValues);
+    }
+
+    get computedAriaLabelledBy() {
+        const ariaValues = [];
+
+        if (this.isTypeFile) {
+            ariaValues.push(this.computedUniqueFileElementLabelledById);
+        }
+        // merge all date & time arias on mobile since it's displayed as a single field
+        if (this.isTypeMobileDateTime) {
+            ariaValues.push(this.dateAriaLabelledBy);
+            ariaValues.push(this.timeAriaLabelledBy);
+        }
+        if (this.ariaLabelledBy) {
+            ariaValues.push(this.ariaLabelledBy);
+        }
+
+        return normalizeAriaAttribute(ariaValues);
+    }
+
+    get computedAriaDescribedBy() {
+        const ariaValues = [];
+
+        if (this._helpMessage) {
+            ariaValues.push(this.computedUniqueHelpElementId);
+        }
+        // The toggle type is described by a secondary element
         if (this.isTypeToggle) {
-            return 'lightning-primitive-input-toggle';
+            ariaValues.push(this.computedUniqueToggleElementDescribedById);
         }
-        if (this.isTypeColor) {
-            return 'lightning-primitive-input-color';
+        // merge all date & time arias on mobile since it's displayed as a single field
+        if (this.isTypeMobileDateTime) {
+            ariaValues.push(this.dateAriaDescribedBy);
+            ariaValues.push(this.timeAriaDescribedBy);
         }
-        if (this.isTypeCheckbox) {
-            return 'lightning-primitive-input-checkbox';
+        if (this.ariaDescribedBy) {
+            ariaValues.push(this.ariaDescribedBy);
         }
-        if (this.isTypeRadio) {
-            return 'lightning-primitive-input-radio';
+
+        return normalizeAriaAttribute(ariaValues);
+    }
+
+    get computedAriaInvalid() {
+        // W-8796658: aria-invalid should always follow the visual indication of errors
+        return computeAriaInvalid(
+            this._helpMessage,
+            this.value,
+            this.ariaInvalid
+        );
+    }
+
+    get isLabelHidden() {
+        return this.variant === VARIANT.LABEL_HIDDEN;
+    }
+
+    get isLabelStacked() {
+        return this.variant === VARIANT.LABEL_STACKED;
+    }
+
+    get accesskey() {
+        return this._accesskey;
+    }
+
+    get colorInputElementValue() {
+        return this.validity.valid && this.value ? this.value : DEFAULT_COLOR;
+    }
+
+    get colorInputStyle() {
+        return `background: ${this.value || '#5679C0'};`;
+    }
+
+    get computedUniqueHelpElementId() {
+        return getRealDOMId(this.template.querySelector('[data-help-message]'));
+    }
+
+    get computedUniqueToggleElementDescribedById() {
+        if (this.isTypeToggle) {
+            const toggle = this.template.querySelector(
+                '[data-toggle-description]'
+            );
+            return getRealDOMId(toggle);
         }
+        return null;
+    }
+
+    get computedUniqueFormLabelId() {
         if (this.isTypeFile) {
-            return 'lightning-primitive-input-file';
+            const formLabel = this.template.querySelector('[data-form-label]');
+            return getRealDOMId(formLabel);
         }
         return null;
     }
 
-    get shouldShowHelpMessage() {
-        return this._shouldShowHelpMessage && this._helpMessage;
+    get computedUniqueFileSelectorLabelId() {
+        if (this.isTypeFile) {
+            const fileBodyLabel = this.template.querySelector(
+                '[data-file-selector-label]'
+            );
+            return getRealDOMId(fileBodyLabel);
+        }
+        return null;
     }
 
-    /************************* INPUT TYPE GETTERS *************************/
+    get computedUniqueFileElementLabelledById() {
+        if (this.isTypeFile) {
+            const labelIds = [
+                this.computedUniqueFormLabelId,
+                this.computedUniqueFileSelectorLabelId,
+            ];
+            return labelIds.join(' ');
+        }
+        return null;
+    }
 
-    get isTypePrimitiveInput() {
-        return (
-            this.isTypeSimple ||
-            this.isTypeCheckboxButton ||
-            this.isTypeCheckbox ||
-            this.isTypeToggle ||
-            this.isTypeColor ||
-            this.isTypeRadio ||
-            this.isTypeFile
-        );
+    get computedFormElementClass() {
+        const classes = classSet('slds-form-element__control slds-grow');
+
+        if (this.isTypeSearch) {
+            classes.add('slds-input-has-icon slds-input-has-icon_left-right');
+        }
+
+        return classes.toString();
+    }
+
+    get i18n() {
+        return i18n;
+    }
+
+    get computedLabelClass() {
+        const classnames = classSet('slds-form-element__label');
+        if (this.isTypeCheckable || this.isTypeFile) {
+            // do nothing
+        } else if (this.isTypeToggle) {
+            classnames.add('slds-m-bottom_none');
+        } else {
+            classnames.add('slds-no-flex');
+        }
+        return classnames
+            .add({ 'slds-assistive-text': this.isLabelHidden })
+            .toString();
+    }
+
+    get computedNumberClass() {
+        return classSet('slds-input')
+            .add({ 'slds-is-disabled': this.disabled })
+            .toString();
+    }
+
+    get computedColorLabelClass() {
+        return classSet(
+            'slds-form-element__label slds-color-picker__summary-label'
+        )
+            .add({ 'slds-assistive-text': this.isLabelHidden })
+            .toString();
+    }
+
+    get computedCheckboxClass() {
+        return classSet('slds-checkbox')
+            .add({ 'slds-checkbox_standalone': !this.isStandardVariant })
+            .toString();
+    }
+
+    get normalizedMax() {
+        return this._normalizeDateTimeString(this.max);
+    }
+
+    get normalizedMin() {
+        return this._normalizeDateTimeString(this.min);
     }
 
     get isTypeNumber() {
@@ -1224,6 +1394,10 @@ export default class LightningInput extends LightningShadowBaseClass {
         );
     }
 
+    get isTypeSearch() {
+        return this.type === 'search';
+    }
+
     get isTypeToggle() {
         return this.type === 'toggle';
     }
@@ -1302,85 +1476,6 @@ export default class LightningInput extends LightningShadowBaseClass {
         );
     }
 
-    get isNativeInput() {
-        return !(
-            this.isTypeDesktopDate ||
-            this.isTypeDesktopDateTime ||
-            this.isTypeDesktopTime
-        );
-    }
-
-    get _primitiveComponent() {
-        return this.template.querySelector(this.primitiveSelector);
-    }
-    /************************* GETTERS *************************/
-
-    /*** Accessibility ***/
-
-    get computedAriaLabel() {
-        const ariaValues = [];
-
-        // merge all date & time arias on mobile since it's displayed as a single field
-        if (this.isTypeMobileDateTime) {
-            ariaValues.push(this.dateAriaLabel);
-            ariaValues.push(this.timeAriaLabel);
-        }
-        if (this.ariaLabel) {
-            ariaValues.push(this.ariaLabel);
-        }
-
-        return normalizeAriaAttribute(ariaValues);
-    }
-
-    get computedAriaInvalid() {
-        // W-8796658: aria-invalid should always follow the visual indication of errors
-        return computeAriaInvalid(
-            this._helpMessage,
-            this.value,
-            this.ariaInvalid
-        );
-    }
-
-    /****** ******/
-
-    get isLabelHidden() {
-        return this.variant === VARIANT.LABEL_HIDDEN;
-    }
-
-    get isLabelStacked() {
-        return this.variant === VARIANT.LABEL_STACKED;
-    }
-
-    get accesskey() {
-        return this._accesskey;
-    }
-
-    get i18n() {
-        return i18n;
-    }
-
-    get computedLabelClass() {
-        const classnames = classSet('slds-form-element__label');
-        if (this.isTypeCheckable || this.isTypeFile) {
-            // do nothing
-        } else if (this.isTypeToggle) {
-            classnames.add('slds-m-bottom_none');
-        } else {
-            classnames.add('slds-no-flex');
-        }
-        return classnames
-            .add({ 'slds-assistive-text': this.isLabelHidden })
-            .toString();
-    }
-
-    get normalizedMax() {
-        return this._normalizeDateTimeString(this.max);
-    }
-
-    get normalizedMin() {
-        return this._normalizeDateTimeString(this.min);
-    }
-
     get _inputElement() {
         if (!this._cachedInputElement || this._inputElementRefreshNeeded) {
             this._inputDragonDecorated = false;
@@ -1397,8 +1492,6 @@ export default class LightningInput extends LightningShadowBaseClass {
                 inputElement = this.template.querySelector(
                     'lightning-timepicker'
                 );
-            } else if (this.isTypePrimitiveInput) {
-                inputElement = this._primitiveComponent.inputElement;
             } else {
                 inputElement = this.template.querySelector('input');
                 this._inputDragonDecorated = true;
@@ -1437,8 +1530,34 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     get _displayedValue() {
         if (this.isTypeNumber) {
-            const subcomponent = this._primitiveComponent;
-            return subcomponent.getDisplayedValue();
+            // When only a symbol is entered by the user, set the display value as the user's input.
+            // This will not affect the value dispatched by input via the change event, as it only dispatches a valid decimal number.
+            // Due to the above, in integrations like input-field, the user's initial input of a symbol
+            // like a minus sign will not be overwritten by an empty string value.
+            // See description in PR for more details: https://github.com/salesforce-experience-platform/lightning-components/pull/3843
+            if (
+                this._inputElement.value.length === 1 &&
+                hasValidNumberSymbol(this._inputElement.value)
+            ) {
+                return this._inputElement.value;
+            }
+
+            // If the number is not valid (bad input, step mismatch, etc.) show the raw number as
+            // well, otherwise the formatted value ends up being 'NaN' which makes it hard to
+            // see mistakes
+            if (this._showRawNumber || !this.validity.valid) {
+                if (
+                    hasValidNumberShortcut(this._numberRawValue) &&
+                    isValidNumber(this._numberRawValue)
+                ) {
+                    this._numberRawValue = fromIsoDecimal(this._value);
+                }
+                return this._numberRawValue;
+            }
+            return formatNumber(
+                this._value,
+                this._buildFormatNumberOptions(this.formatter)
+            );
         }
 
         if (
@@ -1452,6 +1571,18 @@ export default class LightningInput extends LightningShadowBaseClass {
         return this._value;
     }
 
+    /**
+     * Gets the value for the actual 'type' attribute on the input element.
+     */
+    get _internalType() {
+        // Maps number->text to support shorthand input strings like '1k'.
+        if (this.isTypeNumber || this.isTypeEmail) {
+            return 'text';
+        }
+
+        return this._type;
+    }
+
     get isStandardVariant() {
         return (
             this.variant === VARIANT.STANDARD ||
@@ -1459,14 +1590,34 @@ export default class LightningInput extends LightningShadowBaseClass {
         );
     }
 
+    get _showClearButton() {
+        return (
+            this.isTypeSearch &&
+            isNotUndefinedOrNull(this._value) &&
+            this._value !== ''
+        );
+    }
+
     get _ignoreRequired() {
         // If uploading via the drop zone or via the input directly, we should
         // ignore the required flag as a file has been uploaded
         return (
-            this.isTypeFile && this._required && this.files && this.files.length
+            this.isTypeFile &&
+            this._required &&
+            (this.fileUploadedViaDroppableZone ||
+                (this._files && this._files.length > 0))
         );
     }
 
+    get _inputMode() {
+        if (this.isTypeNumber) {
+            return 'decimal';
+        } else if (this.isTypeEmail) {
+            return 'email';
+        }
+        return null;
+    }
+
     get _constraint() {
         if (!this._constraintApi) {
             const overrides = {
@@ -1610,6 +1761,37 @@ export default class LightningInput extends LightningShadowBaseClass {
         return this.template.host.getRootNode();
     }
 
+    handleFileClick() {
+        this._setInputValue(null);
+        this._updateValueAndValidityAttribute(null);
+    }
+
+    handleDropFiles(event) {
+        // drop doesn't trigger focus nor blur, so set state to interacting
+        // and auto leave when there's no more action
+        this.interactingState.interacting();
+
+        this.fileUploadedViaDroppableZone = true;
+        this._files = event.dataTransfer && event.dataTransfer.files;
+
+        this._updateProxyInputAttributes('required');
+
+        this._dispatchChangeEventWithDetail({
+            files: this._files,
+        });
+    }
+
+    /**
+     * Handle text selection.
+     * Dynamically bound to the select event by `renderedCallback`.
+     * This allows us to cache text selection in Safari, which doesn't preserve selection.
+     */
+    handleSelect() {
+        if (isSafari) {
+            this._selectionCache.preserve(this._inputElement);
+        }
+    }
+
     handleFocus() {
         this.interactingState.enter();
 
@@ -1617,11 +1799,24 @@ export default class LightningInput extends LightningShadowBaseClass {
             this._isColorPickerPanelOpen = false;
         }
 
+        // Focusing a number input causes the value displayed to be modified.
+        // Changing the value resets selection, so we save and restore selection.
+        if (this._rendered && this.isTypeNumber) {
+            this._showRawNumber = true;
+            this._selectionCache.preserve(this._inputElement);
+            this._inputElement.value = this._displayedValue;
+            this._selectionCache.restore(this._inputElement);
+        }
+
         this.dispatchEvent(new CustomEvent('focus'));
     }
 
     handleBlur(event) {
         this.interactingState.leave();
+        if (this._rendered && this.isTypeNumber) {
+            this._showRawNumber = false;
+            this._setInputValue(this._displayedValue);
+        }
 
         if (
             !event.relatedTarget ||
@@ -1639,34 +1834,87 @@ export default class LightningInput extends LightningShadowBaseClass {
 
     handleChange(event) {
         event.stopPropagation();
+
         this._dispatchCommitEvent();
+
+        if (this.isTypeSimple && this.value === event.target.value) {
+            return;
+        }
+
         this._dispatchChangeEvent();
     }
 
-    handleCommit() {
-        this._dispatchCommitEvent();
+    handleInput(event) {
+        event.stopPropagation();
+
+        if (this.isTypeNumber) {
+            // for invalid numbers the value might stay the same as the user
+            // changed the invalid input, so we need to update the raw value
+            this._numberRawValue = this._inputElement.value;
+        }
+
+        if (this.isTypeSimple && this.value === event.target.value) {
+            return;
+        }
+
+        this._dispatchChangeEvent();
     }
 
-    handlePrimitiveInputFileChange() {
-        const detail = {
-            files: this.files,
-            value: this._inputElement.value,
-        };
-        this._updateProxyInputAttributes('required');
-        this._updateValueAndValidityAttribute(detail.value);
+    handleKeyDown(event) {
+        if (this.isTypeNumber) {
+            // we're letting "Shift" through to prevent capital letters, other special symbols for type="number"
+            const hasMetaOrCtrlModifier = event.metaKey || event.ctrlKey;
+            // need to check that event.key is valid for "autofill" cases
+            if (!hasMetaOrCtrlModifier && !this.readOnly && event.key) {
+                const key = normalizeKeyValue(event.key);
+
+                if (key.length === 1 && !isValidNumberCharacter(key)) {
+                    event.preventDefault();
+                }
 
-        this.dispatchEvent(
-            new CustomEvent('change', {
-                composed: true,
-                bubbles: true,
-                detail,
-            })
-        );
+                if (key === 'ArrowUp') {
+                    event.preventDefault();
+                    this._numberStepUpAndDispatchEvents(1);
+                } else if (key === 'ArrowDown') {
+                    event.preventDefault();
+                    this._numberStepUpAndDispatchEvents(-1);
+                }
+            }
+        }
+    }
+
+    handleColorChange(event) {
+        const selectedColor = event.detail.color;
+        if (selectedColor !== this._inputElement.value) {
+            this._setInputValue(selectedColor);
+            this._updateValueAndValidityAttribute(selectedColor);
+            this.focus();
+            this._dispatchChangeEventWithDetail({ value: selectedColor });
+            this._dispatchCommitEvent();
+        }
+        this.template
+            .querySelector('lightning-primitive-colorpicker-button')
+            .focus();
     }
 
-    handlePrimitiveInputSimpleChange() {
+    _clearAndSetFocusOnInput(event) {
+        // TODO: Discuss this, it seems the wrong thing to do.
+        // button is removed from template, but
+        // event still is propagated, For example, captured by panel,
+        // then cause panel think is clicked outside.
+        event.stopPropagation();
+
         this.interactingState.enter();
-        this._updateProxyInputAttributes('value');
+        this._setInputValue('');
+        this._updateValueAndValidityAttribute('');
+
+        this._inputElement.focus();
+
+        this._dispatchChangeEventWithDetail({
+            value: this._value,
+        });
+
+        this._dispatchCommitEvent();
     }
 
     _dispatchCommitEvent() {
@@ -1703,11 +1951,7 @@ export default class LightningInput extends LightningShadowBaseClass {
         }
     }
 
-    /**
-     * Label is a required attribute.
-     * Throw error if an invalid value is passed to the label attribute
-     */
-    validateRequiredAttributes() {
+    _validateRequiredAttributes() {
         const { label } = this;
         assert(
             typeof label === 'string' && label.length,
@@ -1729,8 +1973,6 @@ export default class LightningInput extends LightningShadowBaseClass {
     }
 
     _dispatchChangeEvent() {
-        // TODO: investigate removing this in a future update
-        // possibly phase out the interactingState entirely
         this.interactingState.enter();
 
         const detail = {};
@@ -1738,10 +1980,20 @@ export default class LightningInput extends LightningShadowBaseClass {
         if (this.isTypeCheckable) {
             this._updateCheckedAndValidityAttribute(this._inputElement.checked);
             detail.checked = this._checked;
+        } else if (this.isTypeFile) {
+            this._files = this._inputElement.files;
+
+            // LWC does not proxy dom elements any more. So there is no need to call lwc.unwrap here anymore
+            detail.files = this._files;
+
+            this._updateProxyInputAttributes('required');
         }
 
         if (!this.isTypeCheckable) {
-            if (!this.isTypeNumber) {
+            if (this.isTypeNumber) {
+                this._numberRawValue = this._inputElement.value;
+                detail.value = toIsoDecimal(this._inputElement.value);
+            } else {
                 detail.value = this._inputElement.value;
             }
 
@@ -1795,9 +2047,36 @@ export default class LightningInput extends LightningShadowBaseClass {
     }
 
     /**
-     * Updates the class list on the host element based on the variant
+     * Increases (if increment is positive, decreases otherwise) the number value of the input by the increment
+     * multiple of the given 'step'. Additionally dispatches the 'change' and 'commit' events.
+     *
+     * @param {Number} increment A multiple of the step to increase, when step is 'any',
+     * the step is assumed to be 1.
+     * @private
      */
-    updateClassListForVariant() {
+    _numberStepUpAndDispatchEvents(increment) {
+        if (this._readOnly || this._disabled) {
+            return;
+        }
+        this._value = increaseNumberByStep({
+            value: this._value,
+            step: this.step,
+            increment,
+            fractionDigits: this._buildFormatNumberOptions(this.formatter)
+                .minimumFractionDigits,
+        });
+
+        // Raw value is the value the user entered (we preserve a user's input),
+        // since we're generating a new value we're overriding it
+        this._numberRawValue = fromIsoDecimal(this._value);
+
+        this._setInputValue(this._displayedValue);
+
+        this._dispatchChangeEvent();
+        this._dispatchCommitEvent();
+    }
+
+    _updateClassList() {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
             'slds-form-element_horizontal':
@@ -1805,6 +2084,39 @@ export default class LightningInput extends LightningShadowBaseClass {
         });
     }
 
+    _updateNumberValue(value) {
+        const newValue = stringifyNumber(value);
+        this._value = newValue;
+        this._numberRawValue = fromIsoDecimal(newValue);
+    }
+
+    _buildFormatNumberOptions(formatter) {
+        const options = {
+            style: formatter,
+        };
+        // Use the min/max fraction digits from the formatFractionDigits provided by the user if available.
+        // Otherwise, use the number of digits calculated from step
+        if (this._formatFractionDigits !== undefined) {
+            options.minimumFractionDigits = this._formatFractionDigits;
+            options.maximumFractionDigits = this._formatFractionDigits;
+        } else {
+            let digitsFromStep = calculateFractionDigitsFromStep(this._step);
+            // if formatting percentages, when calculating digits from step, take into
+            // consideration that the formatted number is effectively multiplied by 10^2, ie. 0.1 is 10%
+            // so we need to subtract 2 digits;
+            if (formatter === 'percent' && typeof digitsFromStep === 'number') {
+                digitsFromStep -= 2;
+                if (digitsFromStep < 0) {
+                    digitsFromStep = 0;
+                }
+            }
+
+            options.minimumFractionDigits = digitsFromStep;
+            options.maximumFractionDigits = digitsFromStep;
+        }
+        return options;
+    }
+
     _normalizeDateTimeString(value) {
         let result = value;
         if (this.isTypeDate) {
@@ -1817,6 +2129,14 @@ export default class LightningInput extends LightningShadowBaseClass {
         return result;
     }
 
+    _updateInputA11y(elem) {
+        synchronizeAttrs(elem, {
+            [ARIA_LABELLEDBY]: this.computedAriaLabelledBy,
+            [ARIA_DESCRIBEDBY]: this.computedAriaDescribedBy,
+            [ARIA_LABEL]: this.computedAriaLabel,
+        });
+    }
+
     _updateDateOrTimePickerA11y(elem) {
         synchronizeAttrs(elem, {
             ariaLabelledByElement: this._ariaLabelledBy,
@@ -1844,6 +2164,7 @@ export default class LightningInput extends LightningShadowBaseClass {
     _synchronizeA11y() {
         // each of these templates are mutually exclusive and are selected
         // depending on the [type] of input.
+        const input = this.template.querySelector('input');
         const datepicker = this.template.querySelector('lightning-datepicker');
         const timepicker = this.template.querySelector('lightning-timepicker');
         const datetimepicker = this.template.querySelector(
@@ -1851,7 +2172,9 @@ export default class LightningInput extends LightningShadowBaseClass {
         );
         // determine which template type is present,
         // and update a11y props accordingly
-        if (datepicker) {
+        if (input) {
+            this._updateInputA11y(input);
+        } else if (datepicker) {
             this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
             this._updateDateOrTimePickerA11y(timepicker);