Fix #1006 (#1131)

* placeholder

* placeholder story

* add more fruits

* traverse shadowDOMs for scroll containers

* ability to hide expand symbol

* story that proves it works inside a shadow dom

Author: nielslyngsoe

packages/uui-combobox/lib/uui-combobox.element.ts

@@ -91,7 +91,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
    * @attr
    * @default "Close"
    */
-  @property({ type: String })
+  @property({ type: String, attribute: 'close-label' })
   public closeLabel = 'Close';
 
   /**
@@ -103,6 +103,15 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Removes the expand symbol.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: false, attribute: 'hide-expand-symbol' })
+  hideExpandSymbol = false;
+
   /**
    * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.
    * @type {boolean}
@@ -112,6 +121,15 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
   @property({ type: Boolean, reflect: true })
   readonly = false;
 
+  /**
+   * Defines the input placeholder.
+   * @type {string}
+   * @attr
+   * @default ''
+   */
+  @property()
+  placeholder = '';
+
   @query('#combobox-input')
   private _input!: HTMLInputElement;
 
@@ -318,6 +336,7 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
       label="combobox-input"
       type="text"
       .value=${this._displayValue}
+      .placeholder=${this.placeholder}
       autocomplete="off"
       .disabled=${this.disabled}
       .readonly=${this.readonly}
@@ -327,9 +346,11 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
       @keydown=${this.#onKeyDown}>
       <slot name="input-prepend" slot="prepend"></slot>
       ${this.#renderClearButton()}
-      <div id="expand-symbol-wrapper" slot="append">
-        <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
-      </div>
+      ${this.hideExpandSymbol
+        ? nothing
+        : html`<div id="expand-symbol-wrapper" slot="append">
+            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>
+          </div>`}
       <slot name="input-append" slot="append"></slot>
     </uui-input>`;
   };
@@ -338,18 +359,18 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
     if (this.disabled) return nothing;
     if (this.readonly) return nothing;
 
-    return this.value || this.search
-      ? html`<uui-button
-          id="clear-button"
-          @click=${this.#onClear}
-          @keydown=${this.#onClear}
-          label="clear"
-          slot="append"
-          compact
-          style="height: 100%;">
-          <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
-        </uui-button>`
-      : '';
+    return html`<uui-button
+      id="clear-button"
+      @click=${this.#onClear}
+      @keydown=${this.#onClear}
+      label="clear"
+      slot="append"
+      compact
+      style="height: 100%;"
+      tabindex=${this.value || this.search ? '' : '-1'}
+      class=${this.value || this.search ? 'visible' : ''}>
+      <uui-icon name="remove" .fallback=${iconRemove.strings[0]}></uui-icon>
+    </uui-button>`;
   };
 
   #renderDropdown = () => {
@@ -408,6 +429,17 @@ export class UUIComboboxElement extends UUIFormControlMixin(LitElement, '') {
         justify-content: center;
       }
 
+      #clear-button {
+        opacity: 0;
+        transition: opacity 80ms;
+      }
+
+      :host(:not([disabled]):not([readonly]):focus-within)
+        #clear-button.visible,
+      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {
+        opacity: 1;
+      }
+
       #dropdown {
         overflow: hidden;
         z-index: -1;

packages/uui-combobox/lib/uui-combobox.story.ts

@@ -19,18 +19,30 @@ import { until } from 'lit/directives/until.js';
 
 const fruits = [
   'apple',
-  'orange',
+  'apricot',
+  'avocado',
+  'banana',
+  'blackberry',
+  'blueberry',
+  'clementine',
+  'coconut',
+  'fig',
+  'grape',
+  'kiwi',
   'lemon',
+  'mango',
   'melon',
-  'banana',
+  'orange',
+  'papaya',
+  'peach',
   'pear',
-  'mango',
+  'pineapple',
   'plum',
+  'pomegranate',
   'raspberry',
-  'kiwi',
-  'avocado',
-  'coconut',
-  'grape',
+  'strawberry',
+  'tangerine',
+  'watermelon',
 ];
 /**
  * Combobox does not have built in filtering, so you need to provide a list of options and filter them before adding them to the list.
@@ -112,6 +124,12 @@ export const Default: Story = {
   },
 };
 
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'Placeholder',
+  },
+};
+
 export const Disabled: Story = {
   args: {
     disabled: true,

packages/uui-popover-container/lib/uui-popover-container-shadowdomtester.element.ts

@@ -0,0 +1,35 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { html, LitElement } from 'lit';
+
+/**
+ * @element uui-popover-container
+ */
+@defineElement('uui-popover-container-shadowdomtester')
+export class UUIPopoverContainerShadowDomTesterElement extends LitElement {
+  render() {
+    return html`<div
+        style="height: 500px; overflow: auto; outline: 1px solid black">
+        <div
+          style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+          <div style="height: 150px"></div>
+          <uui-button
+            id="popover-button"
+            popovertarget="popover-container"
+            look="primary"
+            label="Open popover">
+            Open popover
+          </uui-button>
+          <div style="height: 150px"></div>
+          <div style="height: 150px"></div>
+        </div>
+        <div style="height: 400px"></div>
+      </div>
+      <uui-popover-container id="popover-container" popover>
+        <div
+          style="width: 100%; background-color: var(--uui-color-surface); max-width: 200px; box-shadow: var(--uui-shadow-depth-4); padding: var(--uui-size-space-4); border-radius: var(--uui-border-radius); font-size: 0.9rem;">
+          <h3>Scroll!</h3>
+          Scrolling in any of the 2 boxes should trigger an update
+        </div>
+      </uui-popover-container>`;
+  }
+}

packages/uui-popover-container/lib/uui-popover-container.element.ts

@@ -332,8 +332,8 @@ export class UUIPopoverContainerElement extends LitElement {
       ? /(auto|scroll|hidden)/
       : /(auto|scroll)/;
 
-    let el = this.#targetElement;
-    while ((el = el.parentElement as HTMLElement)) {
+    let el: HTMLElement | undefined | null = this.#targetElement;
+    while (el) {
       style = getComputedStyle(el);
 
       if (excludeStaticParent && style.position === 'static') {
@@ -347,6 +347,13 @@ export class UUIPopoverContainerElement extends LitElement {
       if (style.position === 'fixed') {
         return;
       }
+
+      if (el.parentElement) {
+        el = el.parentElement;
+      } else {
+        // If we had no parentElement, then check for shadow roots:
+        el = (el.getRootNode() as any)?.host;
+      }
     }
     this.#scrollParents.push(document.body);
   }

packages/uui-popover-container/lib/uui-popover-container.story.ts

@@ -3,6 +3,7 @@ import readme from '../README.md?raw';
 import { html } from 'lit';
 import type { Meta, StoryObj } from '@storybook/web-components';
 import { UUIPopoverContainerElement } from '.';
+import './uui-popover-container-shadowdomtester.element.js';
 
 const meta: Meta<UUIPopoverContainerElement> = {
   id: 'uui-popover-container',
@@ -215,3 +216,27 @@ export const InsideScrollContainer: Story = {
     </uui-popover-container>
   `,
 };
+
+export const InsideShadowDOMScrollContainer: Story = {
+  args: {
+    placement: 'bottom-start',
+    margin: 0,
+  },
+  argTypes: {
+    open: {
+      control: false,
+    },
+  },
+  render: () => html`
+    <div style="height: 500px; overflow: auto; outline: 1px solid black">
+      <div
+        style="width: 300px; height: 300px; outline: 1px solid black; overflow: auto;">
+        <div style="height: 150px"></div>
+        <uui-popover-container-shadowdomtester></uui-popover-container-shadowdomtester>
+        <div style="height: 150px"></div>
+        <div style="height: 150px"></div>
+      </div>
+      <div style="height: 400px"></div>
+    </div>
+  `,
+};