lightning-base-components 1.14.6-alpha → 1.15.2-alpha

package/src/lightning/datatable/virtualization.js

@@ -0,0 +1,319 @@
+import { styleToString } from './utils';
+
+/**
+ * sets an initial table height in the datatable state
+ *
+ * @param {Object} state - datatable state
+ */
+export function resetTableHeight(state) {
+    state.tableHeight = state.rowHeight * state.rows.length;
+}
+
+/**
+ * resets state properties relevant to virtualization
+ * rowHeights when fixedHeight is false
+ *
+ * @param {Object} state - datatable state
+ */
+export function resetRowHeights(state) {
+    state.heightCache = {};
+    state.offsets = [0];
+    state.offsetRanges = [];
+    if (state.virtualize && state.rows.length) {
+        resetTableHeight(state);
+    }
+}
+
+/**
+ * updates state properties relevant to virtualization
+ * rowHeights when fixedHeight is false
+ *
+ * @param {Node} template - the custom element root `this.template` from datatable.js
+ * @param {Object} state - datatable state
+ * @param {Array} renderedRows  - array of rows currently being rendered
+ */
+export function handleVariableRowHeights(template, state, renderedRows) {
+    const currentRange = {
+        start: renderedRows[0].rowIndex,
+        end: renderedRows[renderedRows.length - 1].rowIndex + 1,
+    };
+    let adjustFromIndex;
+    let adjustmentValue = 0;
+    let offsetRangeIndex = findOffsetRangeIndex(
+        state.offsetRanges,
+        currentRange.start
+    );
+
+    renderedRows.forEach((row) => {
+        if (!state.heightCache[row.key]) {
+            // need to get row actual element so we can find its height
+            const rowElement = template.querySelector(
+                `[data-row-key-value="${row.key}"]`
+            );
+            if (rowElement) {
+                // first rendered row needs height increased by 1 to account for missing border
+                let height = rowElement.getBoundingClientRect().height;
+                if (row.rowIndex === currentRange.start) {
+                    height++;
+                }
+                state.heightCache[row.key] = height;
+
+                // calculate estimate of row offset
+                setOffset(state, row, offsetRangeIndex, height);
+
+                // update variables used to adjust later row offsets
+                adjustmentValue += height - state.rowHeight;
+                adjustFromIndex = row.rowIndex + 2;
+            }
+        }
+    });
+    state.tableHeight += adjustmentValue;
+    updateOffsetRanges(
+        state,
+        offsetRangeIndex,
+        currentRange,
+        adjustFromIndex,
+        adjustmentValue
+    );
+    updateVirtualizeStyles(template, state, renderedRows);
+}
+
+/**
+ * uses binary search with offsets and offsetRange
+ * to determine what the first visible index should be
+ * for a given scrollTop value
+ */
+export function findFirstVisibleIndex(state, scrollTop) {
+    const { offsetRanges, offsets, rowHeight, fixedHeight, virtualize } = state;
+    if (virtualize && fixedHeight) {
+        return scrollTop / rowHeight;
+    }
+    let start = 0;
+    let end = offsetRanges.length - 1;
+
+    while (start <= end) {
+        let mid = Math.floor((start + end) / 2);
+        const prevRange = offsetRanges[mid];
+        const nextRange = offsetRanges[mid + 1];
+        const startOffset = offsets[prevRange.start];
+        const endOffset = offsets[prevRange.end];
+
+        const scrollTopAfterPrevStart = startOffset <= scrollTop;
+        const scrollTopInPrevRange =
+            scrollTopAfterPrevStart && scrollTop <= endOffset;
+        const scrollTopBeforeNextRange =
+            !nextRange || scrollTop < offsets[nextRange.start];
+        const scrollTopBetweenRanges =
+            scrollTopAfterPrevStart && scrollTopBeforeNextRange;
+
+        // check if scrollTop is in prevAdj offset values
+        // or between prevAdj and nextAdj offsetValues
+        if (scrollTopInPrevRange) {
+            // find offset in prevRange to use for firstVisibleIndex
+            return searchForOffset(state, prevRange, scrollTop);
+        } else if (scrollTopBetweenRanges) {
+            // use scrollTop and rowHeight to calculate firstVisibleIndex
+            const diff = scrollTop - endOffset;
+            const extraRows = Math.floor(diff / rowHeight);
+            state._firstRowOffset = diff % rowHeight;
+            return prevRange.end + extraRows;
+        }
+        // update start or end for next round of binary search
+        if (scrollTop < startOffset) {
+            end = mid - 1;
+        } else {
+            start = mid + 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * determines the rowIndex for given scrollTop
+ * within a provided offset range using binary search
+ * also sets firstRowOffset to correct value
+ *
+ * @param {object} range - object with start and end index for binary search
+ * @param {number} scrollTop - value to find offset rowIndex for
+ * @returns {number} representing firstVisibleIndex for given scrollTop
+ */
+function searchForOffset(state, range, scrollTop) {
+    let { start, end } = range;
+    const offsets = state.offsets;
+
+    while (start <= end) {
+        const mid = Math.floor((start + end) / 2);
+        const currentOffsetUnderScrollTop = offsets[mid] <= scrollTop;
+        const nextOffsetUnderScrollTop =
+            offsets[mid + 1] && offsets[mid + 1] <= scrollTop;
+
+        if (currentOffsetUnderScrollTop && !nextOffsetUnderScrollTop) {
+            // store how many pixels scrollTop is from top of row
+            state.firstRowOffset = scrollTop - offsets[mid];
+            return mid;
+        } else if (currentOffsetUnderScrollTop) {
+            start = mid + 1;
+        } else {
+            end = mid - 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * uses a binary search to find the offsetRange index that
+ * encompasses the provided row index, or the one immediately
+ * before if no offsetRange encompasses the provided rowIndex
+ */
+function findOffsetRangeIndex(offsetRanges, rowIndex) {
+    let start = 0;
+    let end = offsetRanges.length - 1;
+    while (start <= end) {
+        let mid = Math.floor((start + end) / 2);
+        const currentRangeStartsBeforeRowIndex =
+            offsetRanges[mid].start <= rowIndex;
+        const nextRangeStartsBeforeRowIndex =
+            offsetRanges[mid + 1] && offsetRanges[mid + 1].start <= rowIndex;
+
+        // check if rowIndex is between start of range at "mid"
+        // and start of range at "mid + 1" (or if there is no "mid + 1")
+        if (
+            currentRangeStartsBeforeRowIndex &&
+            !nextRangeStartsBeforeRowIndex
+        ) {
+            return mid;
+        } else if (currentRangeStartsBeforeRowIndex) {
+            // look for earlier offsetRanges
+            start = mid + 1;
+        } else {
+            // look for later offsetRanges
+            end = mid - 1;
+        }
+    }
+    return -1;
+}
+
+/**
+ * sets the offset value for a given row and the next
+ * based on the closest set offset value, the default
+ * row height and the height of the current row
+ *
+ * @param {object} state - datatable state
+ * @param {object} row - specific row object from state
+ * @param {number} offsetRangeIndex - index of offset range to use for row
+ * @param {number} height - height of row's node
+ */
+function setOffset(state, row, offsetRangeIndex, height) {
+    let currentRange = state.offsetRanges[offsetRangeIndex];
+    let currentOffset = state.offsets[row.rowIndex];
+    // if no offset is set for current row, estimate it
+    // based on most recent offset and default rowHeight
+    if (!currentOffset) {
+        currentOffset = 0;
+        if (currentRange) {
+            const baseOffset = state.offsets[currentRange.end];
+            const estimatedRowOffsets =
+                (row.rowIndex - currentRange.end) * state.rowHeight;
+            currentOffset = baseOffset + estimatedRowOffsets;
+            state.offsets[row.rowIndex] = currentOffset;
+        }
+    }
+    // set next offset based on current offset and height
+    state.offsets[row.rowIndex + 1] = currentOffset + height;
+}
+
+/**
+ * merges or adds new offset range and
+ * updates offsets and range values as needed
+ *
+ * @param {number} offsetRangeIndex
+ * @param {*} state - datatable state
+ * @param {object} currentRange - range for current rendered rows
+ * @param {number} adjustFromIndex  - first index to increase by rangeValue
+ * @param {number} rangeValue - amount to increase offsets after adjustFromIndex
+ */
+function updateOffsetRanges(
+    state,
+    offsetRangeIndex,
+    currentRange,
+    adjustFromIndex,
+    adjustmentValue
+) {
+    const { offsets, offsetRanges } = state;
+    let prevRange = offsetRanges[offsetRangeIndex];
+    let nextRange = offsetRanges[offsetRangeIndex + 1];
+    const overlapsWithPrevRange =
+        prevRange && checkOverlap(prevRange, currentRange);
+    const overlapsWithNextRange =
+        nextRange && checkOverlap(currentRange, nextRange);
+
+    // update remaining values in next range by
+    // adjustment value if we're overlapping it
+    if (overlapsWithNextRange && adjustmentValue) {
+        for (let i = adjustFromIndex; i <= nextRange.end; i++) {
+            offsets[i] = offsets[i] + adjustmentValue;
+        }
+    }
+
+    // update state.offsetRanges
+    if (overlapsWithPrevRange && overlapsWithNextRange) {
+        nextRange.start = prevRange.start;
+        nextRange.end = Math.max(currentRange.end, nextRange.end);
+        state.offsetRanges.splice(offsetRangeIndex, 1); // removes prevRange
+    } else if (overlapsWithPrevRange) {
+        prevRange.end = Math.max(prevRange.end, currentRange.end);
+    } else if (overlapsWithNextRange) {
+        nextRange.start = currentRange.start;
+        nextRange.end = Math.max(currentRange.end, nextRange.end);
+        // increase offsetRangeIndex; since it's values have already been updated
+        // we want to skip it when adjusting offsets in later ranges
+        offsetRangeIndex = offsetRangeIndex + 1;
+    } else {
+        state.offsetRanges.splice(offsetRangeIndex + 1, 0, currentRange);
+        // need to increase offsetRangeIndex so we don't
+        // unnecessarily add adjustmentValue to currentRange
+        offsetRangeIndex = offsetRangeIndex + 1;
+    }
+
+    // loop through every offset range after the current one
+    // and increase the offset for each index by adjustmentValue
+    if (offsetRangeIndex >= 0) {
+        for (let i = offsetRangeIndex + 1; i < offsetRanges.length; i++) {
+            const { start: rangeStart, end: rangeEnd } = offsetRanges[i];
+            for (let j = rangeStart; j <= rangeEnd; j++) {
+                offsets[j] = offsets[j] + adjustmentValue;
+            }
+        }
+    }
+}
+
+/**
+ * compares start/end of two ranges to see if the values overlap
+ * used to determine if renderedRows are part of an existent offsetRange
+ * or if a new offsetRange will need to be added
+ */
+function checkOverlap(range1, range2) {
+    return (
+        (range1.start <= range2.start && range2.start <= range1.end) ||
+        (range1.start <= range2.end && range2.end <= range1.end)
+    );
+}
+
+/**
+ * updates scrollTop and top values for rows when
+ * using virtualization with fixedHeight of false
+ */
+function updateVirtualizeStyles(template, state, renderedRows) {
+    // update scrollTop so firstVisibleIndex is correctly placed in viewport
+    const scrollerY = template.querySelector('.slds-scrollable_y');
+    scrollerY.scrollTop =
+        state.offsets[state.firstVisibleIndex] + state.firstRowOffset;
+
+    // update top of rendered rows based on offsets
+    renderedRows.forEach((row) => {
+        row.style = styleToString({
+            position: 'absolute',
+            top: `${state.offsets[row.rowIndex]}px`,
+        });
+    });
+}

package/src/lightning/datatable/wrapText.js

@@ -1,7 +1,7 @@
 import labelClipText from '@salesforce/label/LightningDatatable.clipText';
 import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
-import { getStateColumnIndex, getColumns } from './columns';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
+import { getStateColumnIndex, getColumns } from './columns';
 import { normalizeNumberAttribute } from './utils';
 import { getDefaultState } from './state';
 
@@ -22,13 +22,28 @@ const i18n = {
 
 /************************** WRAP TEXT STATE **************************/
 
-// Returns a boolean representing whether or not the column should be text wrapped
+/**
+ * Returns a boolean representing whether or not the column should be text wrapped
+ *
+ * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
+ *
+ * @param {Object} state Datatable's state object
+ * @param {String} colKeyValue The column key value to look up wrap text configuration
+ * @returns {Boolean} Whether the text is currently wrapped
+ */
 export function getWrapTextState(state = getDefaultState(), colKeyValue) {
     return state.wrapText[colKeyValue] || WRAP_TEXT_DEFAULT;
 }
 
-// Sets a boolean value in state's wrapText object against the column key value
-// representing whether or not the column is text wrapped
+/**
+ * Sets a boolean value in state's wrapText object against the column key value
+ * representing whether or not the column is text wrapped.
+ *
+ * NOTE: Wrap text is not supported in IE, so default parameters are fine here.
+ *
+ * @param {Object} state Datatable's state object
+ * @param {Object} columnDefinition Datatable's column definitions
+ */
 export function setWrapTextState(state = getDefaultState(), columnDefinition) {
     const { colKeyValue, type, wrapText } = columnDefinition;
 
@@ -40,8 +55,13 @@ export function setWrapTextState(state = getDefaultState(), columnDefinition) {
 
 /************************** WRAP TEXT MAX LINES **************************/
 
-// Normalizes and sets wrapTextMaxLines in datatable's state object
-// The normalized value should be a positive integer or it'll fall back to undefined
+/**
+ * Normalizes and sets wrapTextMaxLines in datatable's state object.
+ * The normalized value should be a positive integer or it'll fall back to undefined.
+ *
+ * @param {Object} state Datatable's state object
+ * @param {Integer} value The maximum lines allowed
+ */
 export function setWrapTextMaxLines(state, value) {
     state.wrapTextMaxLines = normalizeNumberAttribute(
         'wrapTextMaxLines',
@@ -51,8 +71,14 @@ export function setWrapTextMaxLines(state, value) {
     );
 }
 
-// Sets the `wrapText` and `wrapTextMaxLines` values in the cell object for all cells in a column
-// These values are used by primitiveCellFactory to set the required classes on the cell for wrapping
+/**
+ * Sets the `wrapText` and `wrapTextMaxLines` values in the cell object for all cells in a column.
+ * These values are used by primitiveCellFactory to set the required classes on the cell for wrapping
+ *
+ * @param {Object} state Datatable's state object
+ * @param {Number} colIndex The column index to update
+ * @param {String} colKeyValue The column key value to look up wrap text configuration
+ */
 function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
     state.rows.forEach((row) => {
         const cell = row.cells[colIndex];
@@ -70,9 +96,9 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
  * provides - Wrap Text and Clip Text.
  * Each header action contains a label, title, action name and its selected value (checked)
  *
- * @param {Object} state - datatable's state object
- * @param {Object} columnDefinition - datatable's column definitions
- * @returns
+ * @param {Object} state Datatable's state object
+ * @param {Object} columnDefinition Datatable's column definitions
+ * @returns {Array} An array of wrap text actions
  */
 export function getActions(state, columnDefinition) {
     const wrapTextActions = [];
@@ -108,15 +134,16 @@ export function getActions(state, columnDefinition) {
  * needs to be changed in the state, change it to the new value and update
  * the check mark to represent the currently selected action
  *
- * @param {Object} state - datatable's state object
- * @param {String} action - action that was selected/triggered
- * @param {String} colKeyValue - column key value
+ * @param {Object} state Datatable's state object
+ * @param {String} action Action that was selected/triggered
+ * @param {String} colKeyValue Column key value
  */
 export function handleTriggeredAction(state, action, colKeyValue) {
     const actionName = action.name;
     if (actionName === 'wrapText' || actionName === 'clipText') {
         // If state should be changed
         if (state.wrapText[colKeyValue] !== (actionName === 'wrapText')) {
+            state.shouldResetHeights = true;
             state.wrapText[colKeyValue] = actionName === 'wrapText';
 
             updateSelectedOptionInHeaderActions(state, colKeyValue);
@@ -124,8 +151,13 @@ export function handleTriggeredAction(state, action, colKeyValue) {
     }
 }
 
-// Update the 'checked' value of the each action to show which action is selected
-// and which action is not selected
+/**
+ * Update the 'checked' value of the each action to show which action is selected
+ * and which action is not selected.
+ *
+ * @param {Object} state The datatable state.
+ * @param {String} colKeyValue The column key.
+ */
 function updateSelectedOptionInHeaderActions(state, colKeyValue) {
     const columns = getColumns(state);
     const colIndex = getStateColumnIndex(state, colKeyValue);
@@ -148,6 +180,12 @@ function updateSelectedOptionInHeaderActions(state, colKeyValue) {
 
 /************************** HELPER FUNCTIONS **************************/
 
+/**
+ * Determines if a given column type is wrappable.
+ *
+ * @param {String} type The type to check.
+ * @returns {Boolean} Whether the given type is wrappable.
+ */
 function isWrappableType(type) {
     return NON_WRAPPABLE_TYPES.indexOf(type) < 0;
 }

package/src/lightning/datepicker/__perf__DISABLED/datepickerWithCalendarOpen.perf.js

@@ -0,0 +1,55 @@
+import { createElement } from 'lwc';
+import Element from 'lightning/datepicker';
+
+describe('datepicker-with-calendar-open', () => {
+    let element;
+    const createDatepicker = () => {
+        const datePicker = createElement(
+            'lightning-datepicker-with-calendar-open',
+            { is: Element }
+        );
+        element.label = 'Datepicker';
+        element.min = '2019-01-10';
+        element.max = '2022-02-10';
+        element.value = '2019-01-20';
+        return datePicker;
+    };
+
+    benchmark('create and append', () => {
+        run(() => {
+            element = createDatepicker();
+            document.body.appendChild(element);
+        });
+    });
+
+    // disabled due to shadowRoot
+    // benchmark('open calendar', () => {
+    //     run(() => {
+    //         element.shadowRoot.querySelector('input').click();
+    //     });
+    // });
+
+    // benchmark('go to previous month', () => {
+    //     run(() => {
+    //         element.shadowRoot
+    //             .querySelector('lightning-calendar')
+    //             .shadowRoot.querySelector('lightning-button-icon')
+    //             .click();
+    //     });
+    // });
+
+    // benchmark('select today', () => {
+    //     run(() => {
+    //         element.shadowRoot
+    //             .querySelector('lightning-calendar')
+    //             .shadowRoot.querySelector('button[name=today]')
+    //             .click();
+    //     });
+    // });
+
+    benchmark('remove', () => {
+        run(() => {
+            document.body.removeChild(element);
+        });
+    });
+});

package/src/lightning/datepicker/datepicker.html

@@ -17,6 +17,7 @@
                     name={name}
                     value={displayValue}
                     placeholder={placeholder}
+                    aria-invalid={computedAriaInvalid}
                     aria-label={ariaLabel}
                     required={required}
                     readonly={readOnly}

package/src/lightning/datepicker/datepicker.js

@@ -29,6 +29,7 @@ import {
     synchronizeAttrs,
     getRealDOMId,
     isIE11,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     generateUniqueId,
@@ -55,6 +56,7 @@ const ARIA_CONTROLS = 'aria-controls';
 const ARIA_LABEL = 'aria-label';
 const ARIA_LABELLEDBY = 'aria-labelledby';
 const ARIA_DESCRIBEDBY = 'aria-describedby';
+const ARIA_INVALID = 'aria-invalid';
 const DATE_STYLE = {
     SHORT: 'short',
     MEDIUM: 'medium',
@@ -228,6 +230,7 @@ export default class LightningDatePicker extends LightningElement {
             [ARIA_DESCRIBEDBY]: this.computedAriaDescribedby,
             [ARIA_CONTROLS]: this.ariaControlsId,
             [ARIA_LABEL]: this._ariaLabel,
+            [ARIA_INVALID]: this.computedAriaInvalid,
         });
 
         // Set aria-describedby on the calendar button that opens the calendar dialog
@@ -744,4 +747,11 @@ export default class LightningDatePicker extends LightningElement {
             this.ariaLabelledByElement.length
         );
     }
+
+    get computedAriaInvalid() {
+        const isAriaInvalid =
+            this.template.host.getAttribute('data-aria-invalid') ||
+            this._errorMessage;
+        return computeAriaInvalid(isAriaInvalid, this.value);
+    }
 }

package/src/lightning/datetimepicker/datetimepicker.html

@@ -11,6 +11,7 @@
                 <div class="slds-form-element__group">
                     <div class="slds-form-element__row">
                         <lightning-datepicker
+                            data-aria-invalid={computedDateAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
                             min={dateMin}
@@ -29,6 +30,7 @@
                         </lightning-datepicker>
 
                         <lightning-timepicker
+                            data-aria-invalid={computedTimeAriaInvalid}
                             class="slds-form-element"
                             autocomplete={autocomplete}
                             label={i18n.time}

package/src/lightning/datetimepicker/datetimepicker.js

@@ -9,6 +9,7 @@ import {
     normalizeAriaAttribute,
     synchronizeAttrs,
     getRealDOMId,
+    computeAriaInvalid,
 } from 'lightning/utilsPrivate';
 import {
     getCurrentTime,
@@ -579,4 +580,11 @@ export default class LightningDateTimePicker extends LightningElement {
             ? isoString.split(TIME_SEPARATOR)
             : null;
     }
+
+    get computedDateAriaInvalid() {
+        return computeAriaInvalid(this._customErrorMessage, this._dateValue);
+    }
+    get computedTimeAriaInvalid() {
+        return computeAriaInvalid(this._customErrorMessage, this._timeValue);
+    }
 }

package/src/lightning/dualListbox/dualListbox.js

@@ -498,7 +498,8 @@ export default class LightningDualListbox extends LightningElement {
 
         return {
             ...option,
-            tabIndex: option.value === focusableValue ? '0' : '-1',
+            tabIndex:
+                !this.disabled && option.value === focusableValue ? '0' : '-1',
             selected: isSelected ? 'true' : 'false',
             classList,
         };

package/src/lightning/formattedAddress/__docs__/formattedAddress.md

@@ -6,6 +6,9 @@ examples:
     - name: latitude
       label: Formatted Address with Latitude/Longitude
       description: Displays an address that includes latitude and longitude.
+    - name: customLocale
+      label: Formatted Address with Custom Locale
+      description: Displays an address in the format of a specific locale.
 ---
 
 A `lightning-formatted-address` component displays addresses in a format and field order

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.html

@@ -0,0 +1,22 @@
+<template>
+    <h1 class="slds-text-heading_small">Address in Spanish format</h1>
+
+    <lightning-formatted-address
+        street="Avenida Concha Espina, Nº 1"
+        city="Madrid"
+        postal-code="28036"
+        country="España"
+        locale="es-ES"
+    ></lightning-formatted-address>
+
+    <h1 class="slds-text-heading_small">Address in Japanese format</h1>
+
+    <lightning-formatted-address
+        street="下連雀1丁目1−83"
+        city="三鷹市"
+        country="日本"
+        province="東京都"
+        postal-code="181–0013"
+        locale="ja-JP"
+    ></lightning-formatted-address>
+</template>

package/src/lightning/formattedAddress/__examples__/customLocale/customLocale.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class LightningExampleFormattedAddressCustomLocale extends LightningElement {}

package/src/lightning/formattedAddress/formattedAddress.js

@@ -25,6 +25,12 @@ export default class LightningFormattedAddress extends LightningElement {
 
     @track href;
 
+    /**
+     * The locale of the address. The default value is 'en-US'.
+     * @type {string}
+     */
+    @api locale = locale;
+
     /**
      * The street detail for the address.
      * @type {string}
@@ -188,7 +194,7 @@ export default class LightningFormattedAddress extends LightningElement {
     }
 
     get address() {
-        const [langCode, countryCode] = locale.split('-');
+        const [langCode, countryCode] = this.locale.split('-');
         return (
             addressFormat.formatAddressAllFields(langCode, countryCode, {
                 address: this.street,

package/src/lightning/groupedCombobox/groupedCombobox.html

@@ -57,7 +57,8 @@
                 onendreached={handleEndReached}
                 ondropdownopen={handleDropdownOpen}
                 ondropdownopenrequest={handleDropdownOpenRequest}
-                onselect={handleSelect}>
+                onselect={handleSelect}
+                disable-default-highlight={disableDefaultHighlight}>
             </lightning-base-combobox>
         </div>
         <template if:true={_hasPills}>