fix(combobox): no longer hides input when a selected item chip is foc…

…used (#9625) **Related Issue:** #6750 ## Summary - no longer hides input when a selected item chip is focused
Esri · Jun 18, 2024 · 24c45b3 · 24c45b3
1 parent 404e472
commit 24c45b3
Show file tree

Hide file tree

Showing 3 changed files with 0 additions and 89 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -1595,46 +1595,6 @@ export namespace Components {
          */
         "startDate"?: Date;
     }
-    interface CalciteDatePickerMonthFloatingMenu {
-        /**
-          * Active date
-         */
-        "activeDate": Date;
-        /**
-          * Defines the available placements that can be used when a flip occurs.
-         */
-        "flipPlacements": FlipPlacement[];
-        /**
-          * CLDR locale data for translated calendar info.
-         */
-        "localeData": DateLocaleData;
-        /**
-          * When `true`, month will be abbreviated.
-         */
-        "monthAbbreviations": boolean;
-        /**
-          * Whether the component is opened.
-         */
-        "open": boolean;
-        /**
-          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-         */
-        "overlayPositioning": OverlayPositioning;
-        /**
-          * Specifies the placement of the `calcite-date-picker` relative to the component.
-          * @default "bottom-start"
-         */
-        "placement": MenuPlacement;
-        /**
-          * Specifies the position of the component in a range date-picker.
-         */
-        "position": "start" | "end";
-        /**
-          * Updates the position of the component.
-          * @param delayed
-         */
-        "reposition": (delayed?: boolean) => Promise<void>;
-    }
     interface CalciteDatePickerMonthHeader {
         /**
           * The focused date is indicated and will become the selected date if the user proceeds.
@@ -6539,12 +6499,6 @@ declare global {
         prototype: HTMLCalciteDatePickerMonthElement;
         new (): HTMLCalciteDatePickerMonthElement;
     };
-    interface HTMLCalciteDatePickerMonthFloatingMenuElement extends Components.CalciteDatePickerMonthFloatingMenu, HTMLStencilElement {
-    }
-    var HTMLCalciteDatePickerMonthFloatingMenuElement: {
-        prototype: HTMLCalciteDatePickerMonthFloatingMenuElement;
-        new (): HTMLCalciteDatePickerMonthFloatingMenuElement;
-    };
     interface HTMLCalciteDatePickerMonthHeaderElementEventMap {
         "calciteInternalDatePickerSelect": Date;
     }
@@ -7882,7 +7836,6 @@ declare global {
         "calcite-date-picker": HTMLCalciteDatePickerElement;
         "calcite-date-picker-day": HTMLCalciteDatePickerDayElement;
         "calcite-date-picker-month": HTMLCalciteDatePickerMonthElement;
-        "calcite-date-picker-month-floating-menu": HTMLCalciteDatePickerMonthFloatingMenuElement;
         "calcite-date-picker-month-header": HTMLCalciteDatePickerMonthHeaderElement;
         "calcite-dropdown": HTMLCalciteDropdownElement;
         "calcite-dropdown-group": HTMLCalciteDropdownGroupElement;
@@ -9462,41 +9415,6 @@ declare namespace LocalJSX {
          */
         "startDate"?: Date;
     }
-    interface CalciteDatePickerMonthFloatingMenu {
-        /**
-          * Active date
-         */
-        "activeDate"?: Date;
-        /**
-          * Defines the available placements that can be used when a flip occurs.
-         */
-        "flipPlacements"?: FlipPlacement[];
-        /**
-          * CLDR locale data for translated calendar info.
-         */
-        "localeData"?: DateLocaleData;
-        /**
-          * When `true`, month will be abbreviated.
-         */
-        "monthAbbreviations"?: boolean;
-        /**
-          * Whether the component is opened.
-         */
-        "open"?: boolean;
-        /**
-          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-         */
-        "overlayPositioning"?: OverlayPositioning;
-        /**
-          * Specifies the placement of the `calcite-date-picker` relative to the component.
-          * @default "bottom-start"
-         */
-        "placement"?: MenuPlacement;
-        /**
-          * Specifies the position of the component in a range date-picker.
-         */
-        "position"?: "start" | "end";
-    }
     interface CalciteDatePickerMonthHeader {
         /**
           * The focused date is indicated and will become the selected date if the user proceeds.
@@ -13864,7 +13782,6 @@ declare namespace LocalJSX {
         "calcite-date-picker": CalciteDatePicker;
         "calcite-date-picker-day": CalciteDatePickerDay;
         "calcite-date-picker-month": CalciteDatePickerMonth;
-        "calcite-date-picker-month-floating-menu": CalciteDatePickerMonthFloatingMenu;
         "calcite-date-picker-month-header": CalciteDatePickerMonthHeader;
         "calcite-dropdown": CalciteDropdown;
         "calcite-dropdown-group": CalciteDropdownGroup;
@@ -13981,7 +13898,6 @@ declare module "@stencil/core" {
             "calcite-date-picker": LocalJSX.CalciteDatePicker & JSXBase.HTMLAttributes<HTMLCalciteDatePickerElement>;
             "calcite-date-picker-day": LocalJSX.CalciteDatePickerDay & JSXBase.HTMLAttributes<HTMLCalciteDatePickerDayElement>;
             "calcite-date-picker-month": LocalJSX.CalciteDatePickerMonth & JSXBase.HTMLAttributes<HTMLCalciteDatePickerMonthElement>;
-            "calcite-date-picker-month-floating-menu": LocalJSX.CalciteDatePickerMonthFloatingMenu & JSXBase.HTMLAttributes<HTMLCalciteDatePickerMonthFloatingMenuElement>;
             "calcite-date-picker-month-header": LocalJSX.CalciteDatePickerMonthHeader & JSXBase.HTMLAttributes<HTMLCalciteDatePickerMonthHeaderElement>;
             "calcite-dropdown": LocalJSX.CalciteDropdown & JSXBase.HTMLAttributes<HTMLCalciteDropdownElement>;
             "calcite-dropdown-group": LocalJSX.CalciteDropdownGroup & JSXBase.HTMLAttributes<HTMLCalciteDropdownGroupElement>;

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -139,10 +139,6 @@
   }
 }
 
-.input--transparent {
-  @apply opacity-0;
-}
-
 .input--single {
   @apply p-0;
   margin-block: var(--calcite-internal-combobox-input-margin-block);

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1596,7 +1596,6 @@ export class Combobox
           class={{
             [CSS.input]: true,
             "input--single": true,
-            "input--transparent": this.activeChipIndex > -1,
             "input--hidden": showLabel,
             "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
           }}