lightning-base-components 1.18.7-alpha → 1.18.8-alpha

package/src/lightning/input/input.js

@@ -1,6 +1,4 @@
 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';
@@ -18,15 +16,11 @@ import { classSet, formatLabel } from 'lightning/utils';
 import {
     assert,
     classListMutation,
-    getRealDOMId,
     reflectAttribute,
-    isSafari,
     isNativeComponent,
-    isNotUndefinedOrNull,
     isUndefinedOrNull,
     normalizeAriaAttribute,
     normalizeBoolean,
-    normalizeKeyValue,
     normalizeString,
     synchronizeAttrs,
     decorateInputForDragon,
@@ -34,7 +28,6 @@ import {
     computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import AriaObserver from 'lightning/ariaObserver';
-import { normalizeInput } from './normalize';
 import {
     normalizeDate,
     normalizeDateTimeToUTC,
@@ -47,26 +40,14 @@ import {
     InteractingState,
     normalizeVariant,
     VARIANT,
-} from 'lightning/inputUtils';
-import {
-    calculateFractionDigitsFromStep,
-    formatNumber,
-    fromIsoDecimal,
-    hasValidNumberShortcut,
-    hasValidNumberSymbol,
-    increaseNumberByStep,
+    normalizeInput,
     isValidNumber,
-    isValidNumberCharacter,
-    stringifyNumber,
-    toIsoDecimal,
-} from './numberUtil';
-import { isValidEmail, isValidMultipleEmails } from './emailUtil';
-import { InputSelectionCache } from './selection';
+    isValidEmail,
+    isValidMultipleEmails,
+} from 'lightning/inputUtils';
 
 const i18n = {
     a11yTriggerText: labelA11yTriggerText,
-    inputFileBodyText: labelInputFileBodyText,
-    inputFileButtonLabel: labelInputFileButtonLabel,
     messageToggleActive: labelMessageToggleActive,
     messageToggleInactive: labelMessageToggleInactive,
     numberIncrementCounter: labelNumberIncrementCounter,
@@ -106,7 +87,6 @@ const VALID_NUMBER_FORMATTERS = [
     'percent-fixed',
     'currency',
 ];
-const DEFAULT_COLOR = '#000000';
 const DEFAULT_FORMATTER = VALID_NUMBER_FORMATTERS[0];
 
 /**
@@ -301,12 +281,12 @@ export default class LightningInput extends LightningElement {
     @track _ariaInvalid;
     @track _autocomplete;
 
+    _shouldShowHelpMessage = true;
+    _helpMessageChanged = false;
     _formatter = DEFAULT_FORMATTER;
     _showRawNumber = false;
     _initialValueSet = false;
-    _files = null;
     _rendered;
-    _selectionCache;
 
     constructor() {
         super();
@@ -314,12 +294,7 @@ export default class LightningInput extends LightningElement {
 
         // Native Shadow Root will return [native code].
         // Our synthetic method will return the function source.
-        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();
+        this._isNativeShadow = isNativeComponent(this);
     }
 
     connectedCallback() {
@@ -334,21 +309,18 @@ export default class LightningInput extends LightningElement {
 
         this.classList.add('slds-form-element');
 
-        this._updateClassList();
-        this._validateRequiredAttributes();
+        this.updateClassListForVariant();
+        this.validateRequiredAttributes();
 
         this.interactingState = new InteractingState();
         this.interactingState.onleave(() => this.reportValidity());
-
-        if (this.isTypeNumber) {
-            this._updateNumberValue(this._value);
-        }
     }
 
     disconnectedCallback() {
         this._rendered = false;
         this._initialValueSet = false;
         this._cachedInputElement = undefined;
+        this.cachedPrimitiveComponent = undefined;
         if (this.ariaObserver) {
             this.ariaObserver.disconnect();
             this.ariaObserver = undefined;
@@ -356,18 +328,15 @@ export default class LightningInput extends LightningElement {
     }
 
     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();
@@ -378,10 +347,6 @@ export default class LightningInput extends LightningElement {
         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;
@@ -397,17 +362,7 @@ export default class LightningInput extends LightningElement {
      * @type {number}
      *
      */
-    @api
-    get formatFractionDigits() {
-        return this._formatFractionDigits;
-    }
-
-    set formatFractionDigits(value) {
-        this._formatFractionDigits = value;
-        if (this._rendered && this.isTypeNumber) {
-            this._setInputValue(this._displayedValue);
-        }
-    }
+    @api formatFractionDigits;
 
     /**
      * A space-separated list of element IDs whose presence or content is controlled by the
@@ -651,15 +606,22 @@ export default class LightningInput extends LightningElement {
      */
     @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 = normalizeString(value, {
-            fallbackValue: DEFAULT_FORMATTER,
-            validValues: VALID_NUMBER_FORMATTERS,
-        });
-        this._updateInputDisplayValueIfTypeNumber();
+        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;
+        }
     }
 
     /**
@@ -843,7 +805,6 @@ export default class LightningInput extends LightningElement {
         }
 
         this._updateProxyInputAttributes('step');
-        this._updateInputDisplayValueIfTypeNumber();
     }
 
     /**
@@ -865,7 +826,11 @@ export default class LightningInput extends LightningElement {
         this._checked = normalizeBoolean(value);
 
         if (this._rendered) {
-            this._inputElement.checked = this._checked;
+            if (this.isTypeCheckbox) {
+                this._primitiveComponent.checked = this._checked;
+            } else {
+                this._inputElement.checked = this._checked;
+            }
         }
 
         // Update proxy input should be set after _inputElement is updated.
@@ -896,29 +861,29 @@ export default class LightningInput extends LightningElement {
      */
     @api
     get value() {
+        if (this.isTypeSimple) {
+            const subcomponent = this._primitiveComponent;
+            if (subcomponent) {
+                return subcomponent.value;
+            }
+        }
         return this._value;
     }
 
     set value(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');
         // 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;
+                }
+            }
+
+            this._updateProxyInputAttributes('value');
+
             // 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
@@ -949,7 +914,7 @@ export default class LightningInput extends LightningElement {
 
     set variant(value) {
         this._variant = normalizeVariant(value);
-        this._updateClassList();
+        this.updateClassListForVariant();
         reflectAttribute(this, 'variant', this._variant);
     }
 
@@ -1053,7 +1018,7 @@ export default class LightningInput extends LightningElement {
     @api
     get files() {
         if (this.isTypeFile) {
-            return this._files;
+            return this._primitiveComponent.files;
         }
         return null;
     }
@@ -1068,6 +1033,14 @@ export default class LightningInput extends LightningElement {
         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.
@@ -1142,9 +1115,13 @@ export default class LightningInput extends LightningElement {
             }
             if (this._rendered && !this.isNativeInput) {
                 this._inputElement.showHelpMessage(message);
-            } else {
-                this._helpMessage = message;
+                return;
             }
+            if (this._rendered && this.isTypePrimitiveInput) {
+                this._shouldShowHelpMessage = false;
+                this._helpMessageChanged = true;
+            }
+            this._helpMessage = message;
         });
     }
 
@@ -1177,195 +1154,47 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    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.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);
+    get primitiveSelector() {
+        if (this.isTypeSimple) {
+            return 'lightning-primitive-input-simple';
         }
-
-        return normalizeAriaAttribute(ariaValues);
-    }
-
-    get computedAriaDescribedBy() {
-        const ariaValues = [];
-
-        if (this._helpMessage) {
-            ariaValues.push(this.computedUniqueHelpElementId);
+        if (this.isTypeCheckboxButton) {
+            return 'lightning-primitive-input-checkbox-button';
         }
-        // The toggle type is described by a secondary element
         if (this.isTypeToggle) {
-            ariaValues.push(this.computedUniqueToggleElementDescribedById);
-        }
-        // 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.ariaDescribedBy) {
-            ariaValues.push(this.ariaDescribedBy);
+            return 'lightning-primitive-input-toggle';
         }
-
-        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);
+        if (this.isTypeColor) {
+            return 'lightning-primitive-input-color';
         }
-        return null;
-    }
-
-    get computedUniqueFormLabelId() {
-        if (this.isTypeFile) {
-            const formLabel = this.template.querySelector('[data-form-label]');
-            return getRealDOMId(formLabel);
+        if (this.isTypeCheckbox) {
+            return 'lightning-primitive-input-checkbox';
         }
-        return null;
-    }
-
-    get computedUniqueFileSelectorLabelId() {
-        if (this.isTypeFile) {
-            const fileBodyLabel = this.template.querySelector(
-                '[data-file-selector-label]'
-            );
-            return getRealDOMId(fileBodyLabel);
+        if (this.isTypeRadio) {
+            return 'lightning-primitive-input-radio';
         }
-        return null;
-    }
-
-    get computedUniqueFileElementLabelledById() {
         if (this.isTypeFile) {
-            const labelIds = [
-                this.computedUniqueFormLabelId,
-                this.computedUniqueFileSelectorLabelId,
-            ];
-            return labelIds.join(' ');
+            return 'lightning-primitive-input-file';
         }
         return null;
     }
 
-    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 shouldShowHelpMessage() {
+        return this._shouldShowHelpMessage && this._helpMessage;
     }
 
-    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();
-    }
+    /************************* INPUT TYPE GETTERS *************************/
 
-    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 isTypePrimitiveInput() {
+        return (
+            this.isTypeSimple ||
+            this.isTypeCheckboxButton ||
+            this.isTypeCheckbox ||
+            this.isTypeToggle ||
+            this.isTypeColor ||
+            this.isTypeRadio ||
+            this.isTypeFile
+        );
     }
 
     get isTypeNumber() {
@@ -1394,10 +1223,6 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    get isTypeSearch() {
-        return this.type === 'search';
-    }
-
     get isTypeToggle() {
         return this.type === 'toggle';
     }
@@ -1463,19 +1288,104 @@ export default class LightningInput extends LightningElement {
     }
 
     get isTypeSimple() {
+        const type = this.type;
         return (
-            !this.isTypeCheckbox &&
-            !this.isTypeCheckboxButton &&
-            !this.isTypeToggle &&
-            !this.isTypeRadio &&
-            !this.isTypeFile &&
-            !this.isTypeColor &&
-            !this.isTypeDesktopDate &&
-            !this.isTypeDesktopDateTime &&
-            !this.isTypeDesktopTime
+            type === 'text' ||
+            type === 'number' ||
+            type === 'email' ||
+            type === 'tel' ||
+            type === 'url' ||
+            type === 'search' ||
+            type === 'password' ||
+            type === 'range' ||
+            !type
+        );
+    }
+
+    get isNativeInput() {
+        return !(
+            this.isTypeDesktopDate ||
+            this.isTypeDesktopDateTime ||
+            this.isTypeDesktopTime
+        );
+    }
+
+    get _primitiveComponent() {
+        if (!this.cachedPrimitiveComponent) {
+            this.cachedPrimitiveComponent = this.template.querySelector(
+                this.primitiveSelector
+            );
+        }
+        return this.cachedPrimitiveComponent;
+    }
+    /************************* 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;
@@ -1492,6 +1402,8 @@ export default class LightningInput extends LightningElement {
                 inputElement = this.template.querySelector(
                     'lightning-timepicker'
                 );
+            } else if (this.isTypePrimitiveInput) {
+                inputElement = this._primitiveComponent.inputElement;
             } else {
                 inputElement = this.template.querySelector('input');
                 this._inputDragonDecorated = true;
@@ -1530,34 +1442,8 @@ export default class LightningInput extends LightningElement {
 
     get _displayedValue() {
         if (this.isTypeNumber) {
-            // 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)
-            );
+            const subcomponent = this._primitiveComponent;
+            return subcomponent.getDisplayedValue();
         }
 
         if (
@@ -1571,18 +1457,6 @@ export default class LightningInput extends LightningElement {
         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 ||
@@ -1590,34 +1464,14 @@ export default class LightningInput extends LightningElement {
         );
     }
 
-    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.fileUploadedViaDroppableZone ||
-                (this._files && this._files.length > 0))
+            this.isTypeFile && this._required && this.files && this.files.length
         );
     }
 
-    get _inputMode() {
-        if (this.isTypeNumber) {
-            return 'decimal';
-        } else if (this.isTypeEmail) {
-            return 'email';
-        }
-        return null;
-    }
-
     get _constraint() {
         if (!this._constraintApi) {
             const overrides = {
@@ -1761,37 +1615,6 @@ export default class LightningInput extends LightningElement {
         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();
 
@@ -1799,24 +1622,11 @@ export default class LightningInput extends LightningElement {
             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 ||
@@ -1834,87 +1644,34 @@ export default class LightningInput extends LightningElement {
 
     handleChange(event) {
         event.stopPropagation();
-
         this._dispatchCommitEvent();
-
-        if (this.isTypeSimple && this.value === event.target.value) {
-            return;
-        }
-
         this._dispatchChangeEvent();
     }
 
-    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();
+    handleCommit() {
+        this._dispatchCommitEvent();
     }
 
-    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();
-                }
-
-                if (key === 'ArrowUp') {
-                    event.preventDefault();
-                    this._numberStepUpAndDispatchEvents(1);
-                } else if (key === 'ArrowDown') {
-                    event.preventDefault();
-                    this._numberStepUpAndDispatchEvents(-1);
-                }
-            }
-        }
-    }
+    handlePrimitiveInputFileChange() {
+        const detail = {
+            files: this.files,
+            value: this._inputElement.value,
+        };
+        this._updateProxyInputAttributes('required');
+        this._updateValueAndValidityAttribute(detail.value);
 
-    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();
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                composed: true,
+                bubbles: true,
+                detail,
+            })
+        );
     }
 
-    _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();
-
+    handlePrimitiveInputSimpleChange() {
         this.interactingState.enter();
-        this._setInputValue('');
-        this._updateValueAndValidityAttribute('');
-
-        this._inputElement.focus();
-
-        this._dispatchChangeEventWithDetail({
-            value: this._value,
-        });
-
-        this._dispatchCommitEvent();
+        this._updateProxyInputAttributes('value');
     }
 
     _dispatchCommitEvent() {
@@ -1951,7 +1708,11 @@ export default class LightningInput extends LightningElement {
         }
     }
 
-    _validateRequiredAttributes() {
+    /**
+     * Label is a required attribute.
+     * Throw error if an invalid value is passed to the label attribute
+     */
+    validateRequiredAttributes() {
         const { label } = this;
         assert(
             typeof label === 'string' && label.length,
@@ -1973,6 +1734,8 @@ export default class LightningInput extends LightningElement {
     }
 
     _dispatchChangeEvent() {
+        // TODO: investigate removing this in a future update
+        // possibly phase out the interactingState entirely
         this.interactingState.enter();
 
         const detail = {};
@@ -1980,20 +1743,10 @@ export default class LightningInput extends LightningElement {
         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) {
-                this._numberRawValue = this._inputElement.value;
-                detail.value = toIsoDecimal(this._inputElement.value);
-            } else {
+            if (!this.isTypeNumber) {
                 detail.value = this._inputElement.value;
             }
 
@@ -2047,36 +1800,9 @@ export default class LightningInput extends LightningElement {
     }
 
     /**
-     * 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
+     * Updates the class list on the host element based on the variant
      */
-    _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() {
+    updateClassListForVariant() {
         classListMutation(this.classList, {
             'slds-form-element_stacked': this.variant === VARIANT.LABEL_STACKED,
             'slds-form-element_horizontal':
@@ -2084,39 +1810,6 @@ export default class LightningInput extends LightningElement {
         });
     }
 
-    _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) {
@@ -2129,14 +1822,6 @@ export default class LightningInput extends LightningElement {
         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,
@@ -2164,7 +1849,6 @@ export default class LightningInput extends LightningElement {
     _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(
@@ -2172,9 +1856,7 @@ export default class LightningInput extends LightningElement {
         );
         // determine which template type is present,
         // and update a11y props accordingly
-        if (input) {
-            this._updateInputA11y(input);
-        } else if (datepicker) {
+        if (datepicker) {
             this._updateDateOrTimePickerA11y(datepicker);
         } else if (timepicker) {
             this._updateDateOrTimePickerA11y(timepicker);