diff --git a/packages/elements/src/components/ino-option/ino-option.tsx b/packages/elements/src/components/ino-option/ino-option.tsx index a35948e88c..539846fce5 100644 --- a/packages/elements/src/components/ino-option/ino-option.tsx +++ b/packages/elements/src/components/ino-option/ino-option.tsx @@ -68,11 +68,10 @@ export class InoOption { }); return ( - +
  • diff --git a/packages/elements/src/components/ino-select/ino-select.tsx b/packages/elements/src/components/ino-select/ino-select.tsx index 7a0cc39f74..a6bcc8855c 100644 --- a/packages/elements/src/components/ino-select/ino-select.tsx +++ b/packages/elements/src/components/ino-select/ino-select.tsx @@ -13,7 +13,7 @@ import { Watch, } from '@stencil/core'; import classNames from 'classnames'; -import { hasSlotContent } from '../../util/component-utils'; +import { generateUniqueId, hasSlotContent } from '../../util/component-utils'; /** * @slot icon-leading - For the icon to be prepended @@ -32,6 +32,13 @@ export class Select implements ComponentInterface { private nativeInputElement?: HTMLInputElement; private optionsObserver: MutationObserver; + /** + * An internal auto generated id for the helper field. + */ + private selectElId = generateUniqueId(); + + + @Element() el!: HTMLInoSelectElement; /** @@ -125,6 +132,7 @@ export class Select implements ComponentInterface { connectedCallback() { // in case of usage e.g. in a popover this is necessary this.create(); + this.optionsObserver = new MutationObserver(() => { forceUpdate(this.el); }); @@ -240,7 +248,12 @@ export class Select implements ComponentInterface {
    (this.mdcSelectContainerEl = el)}> {hiddenInput} -
    +
    {leadingSlotHasContent && ( @@ -249,6 +262,7 @@ export class Select implements ComponentInterface {
    {this.renderDropdownIcon()}
    -
    +
      (this.mdcOptionsListEl = el)} >