From 80c070e50cc3abe014efee6a7ba32cb510e1366b Mon Sep 17 00:00:00 2001
From: tiahan <tiahan@cisco.com>
Date: Thu, 24 Oct 2024 16:33:22 +0800
Subject: [PATCH] feat(combobox): resolve conflict

---
 .../ComboBox/ComboBox.unit.test.tsx.snap      | 2759 +++++++++++++++++
 .../ListItemBase/ListItemBase.style.scss      |    2 +-
 .../TextInput/TextInput.unit.test.tsx.snap    |   37 +
 3 files changed, 2797 insertions(+), 1 deletion(-)

diff --git a/src/components/ComboBox/ComboBox.unit.test.tsx.snap b/src/components/ComboBox/ComboBox.unit.test.tsx.snap
index e69de29bb2..7260356192 100644
--- a/src/components/ComboBox/ComboBox.unit.test.tsx.snap
+++ b/src/components/ComboBox/ComboBox.unit.test.tsx.snap
@@ -0,0 +1,2759 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComboBox snapshot should match snapshot label 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+  label="comboBox_label"
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+      }
+    }
+  >
+    <label
+      htmlFor="test-ID"
+      id="test-ID"
+    >
+      <Text>
+        <p
+          className="md-text-wrapper"
+          data-type="body-primary"
+        >
+          comboBox_label
+        </p>
+      </Text>
+    </label>
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            aria-labelledby="test-ID"
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            aria-labelledby="test-ID"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-labelledby="test-ID"
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                aria-labelledby="test-ID"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      aria-labelledby="test-ID"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-1"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot with className 1`] = `
+<ComboBox
+  className="example-class"
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+>
+  <div
+    className="example-class md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-3"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot with listboxWidth 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+  listboxWidth="16rem"
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "16rem",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="fixed"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "fixed",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "fixed",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "fixed",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-7"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot with noResultLabel 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+  noResultLabel="No result"
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-6"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot with placeholder 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+  placeholder="ComboBox"
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            placeholder="ComboBox"
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                placeholder="ComboBox"
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-5"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot with style 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "key": "key1",
+        "label": "item1",
+      },
+      {
+        "key": "key2",
+        "label": "item2",
+      },
+      {
+        "key": "key3",
+        "label": "item3",
+      },
+      {
+        "key": "key4",
+        "label": "listbox1",
+      },
+      {
+        "key": "key5",
+        "label": "listbox2",
+      },
+      {
+        "key": "key6",
+        "label": "listbox3",
+      },
+    ]
+  }
+  style={
+    {
+      "color": "pink",
+    }
+  }
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+        "color": "pink",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-4"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
+
+exports[`ComboBox snapshot should match snapshot withSection 1`] = `
+<ComboBox
+  defaultItems={
+    [
+      {
+        "items": [
+          {
+            "key": "key1",
+            "label": "item1",
+          },
+          {
+            "key": "key2",
+            "label": "item2",
+          },
+          {
+            "key": "key3",
+            "label": "item3",
+          },
+          {
+            "key": "key4",
+            "label": "item4",
+          },
+        ],
+        "section": "section1",
+      },
+      {
+        "items": [
+          {
+            "key": "key5",
+            "label": "item5",
+          },
+          {
+            "key": "key6",
+            "label": "item6",
+          },
+          {
+            "key": "key7",
+            "label": "item7",
+          },
+          {
+            "key": "key8",
+            "label": "item8",
+          },
+        ],
+        "section": "section2",
+      },
+    ]
+  }
+>
+  <div
+    className="md-combo-box-wrapper"
+    style={
+      {
+        "--local-width": "100%",
+      }
+    }
+  >
+    <Popover
+      className="md-combo-box-popover"
+      disableFocusLock={true}
+      hideOnEsc={false}
+      interactive={true}
+      onClickOutside={[Function]}
+      onHide={[Function]}
+      onKeyDown={[Function]}
+      placement="bottom"
+      removeTippyAriaHidden={true}
+      setInstance={[Function]}
+      showArrow={false}
+      strategy="absolute"
+      style={
+        {
+          "display": "none",
+          "maxHeight": "none",
+        }
+      }
+      trigger="manual"
+      triggerComponent={
+        <span
+          className="md-combo-box-trigger"
+        >
+          <input
+            aria-autocomplete="list"
+            aria-expanded={false}
+            autoComplete="off"
+            autoCorrect="off"
+            className="md-combo-box-input"
+            disabled={false}
+            id="test-ID"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            onTouchEnd={[Function]}
+            readOnly={false}
+            role="combobox"
+            spellCheck="false"
+            type="text"
+            value=""
+          />
+          <ButtonSimple
+            aria-expanded={false}
+            aria-haspopup="listbox"
+            className="md-combo-box-button"
+            excludeFromTabOrder={true}
+            id="test-ID"
+            onKeyDown={[Function]}
+            onPress={[Function]}
+            onPressStart={[Function]}
+            tabIndex={-1}
+          >
+            <span
+              aria-hidden="true"
+            >
+              <Icon
+                name="arrow-down"
+                scale={16}
+                weight="bold"
+              />
+            </span>
+          </ButtonSimple>
+        </span>
+      }
+    >
+      <LazyTippy
+        animation={false}
+        appendTo="parent"
+        hideOnClick={false}
+        interactive={true}
+        offset={
+          [
+            0,
+            5,
+          ]
+        }
+        onClickOutside={[Function]}
+        onHidden={[Function]}
+        onHide={[Function]}
+        placement="bottom"
+        plugins={
+          [
+            {
+              "fn": [Function],
+              "name": "addBackdropPlugin",
+            },
+          ]
+        }
+        popperOptions={
+          {
+            "modifiers": [
+              {
+                "enabled": false,
+                "name": "arrow",
+                "options": {
+                  "element": "#arrow1",
+                  "padding": 5,
+                },
+              },
+              {
+                "name": "preventOverflow",
+                "options": {
+                  "altAxis": true,
+                  "boundariesElement": "scrollParent",
+                  "padding": 8,
+                },
+              },
+            ],
+            "strategy": "absolute",
+          }
+        }
+        removeTippyAriaHidden={true}
+        render={[Function]}
+        setInstance={[Function]}
+        trigger="manual"
+      >
+        <ForwardRef(TippyWrapper)
+          animation={false}
+          appendTo="parent"
+          hideOnClick={false}
+          interactive={true}
+          offset={
+            [
+              0,
+              5,
+            ]
+          }
+          onClickOutside={[Function]}
+          onHidden={[Function]}
+          onHide={[Function]}
+          placement="bottom"
+          plugins={
+            [
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+              },
+              {
+                "fn": [Function],
+                "name": "addBackdropPlugin",
+              },
+            ]
+          }
+          popperOptions={
+            {
+              "modifiers": [
+                {
+                  "enabled": false,
+                  "name": "arrow",
+                  "options": {
+                    "element": "#arrow1",
+                    "padding": 5,
+                  },
+                },
+                {
+                  "name": "preventOverflow",
+                  "options": {
+                    "altAxis": true,
+                    "boundariesElement": "scrollParent",
+                    "padding": 8,
+                  },
+                },
+              ],
+              "strategy": "absolute",
+            }
+          }
+          render={[Function]}
+          trigger="manual"
+        >
+          <Tippy
+            animation={false}
+            appendTo="parent"
+            hideOnClick={false}
+            interactive={true}
+            offset={
+              [
+                0,
+                5,
+              ]
+            }
+            onClickOutside={[Function]}
+            onHidden={[Function]}
+            onHide={[Function]}
+            placement="bottom"
+            plugins={
+              [
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                },
+                {
+                  "fn": [Function],
+                  "name": "addBackdropPlugin",
+                },
+              ]
+            }
+            popperOptions={
+              {
+                "modifiers": [
+                  {
+                    "enabled": false,
+                    "name": "arrow",
+                    "options": {
+                      "element": "#arrow1",
+                      "padding": 5,
+                    },
+                  },
+                  {
+                    "name": "preventOverflow",
+                    "options": {
+                      "altAxis": true,
+                      "boundariesElement": "scrollParent",
+                      "padding": 8,
+                    },
+                  },
+                ],
+                "strategy": "absolute",
+              }
+            }
+            render={[Function]}
+            trigger="manual"
+          >
+            <span
+              aria-haspopup="dialog"
+              className="md-combo-box-trigger"
+              id="1"
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                autoComplete="off"
+                autoCorrect="off"
+                className="md-combo-box-input"
+                disabled={false}
+                id="test-ID"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onTouchEnd={[Function]}
+                readOnly={false}
+                role="combobox"
+                spellCheck="false"
+                type="text"
+                value=""
+              />
+              <ButtonSimple
+                aria-expanded={false}
+                aria-haspopup="listbox"
+                className="md-combo-box-button"
+                excludeFromTabOrder={true}
+                id="test-ID"
+                onKeyDown={[Function]}
+                onPress={[Function]}
+                onPressStart={[Function]}
+                tabIndex={-1}
+              >
+                <FocusRing>
+                  <FocusRing
+                    focusClass="md-focus-ring-wrapper children"
+                    focusRingClass="md-focus-ring-wrapper children"
+                  >
+                    <button
+                      aria-expanded={false}
+                      aria-haspopup="listbox"
+                      className="md-combo-box-button md-button-simple-wrapper"
+                      id="test-ID"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onDragStart={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      onMouseDown={[Function]}
+                      onMouseEnter={[Function]}
+                      onMouseLeave={[Function]}
+                      onMouseUp={[Function]}
+                      onTouchCancel={[Function]}
+                      onTouchEnd={[Function]}
+                      onTouchMove={[Function]}
+                      onTouchStart={[Function]}
+                      tabIndex={-1}
+                      type="button"
+                    >
+                      <span
+                        aria-hidden="true"
+                      >
+                        <Icon
+                          name="arrow-down"
+                          scale={16}
+                          weight="bold"
+                        >
+                          <div
+                            aria-hidden="true"
+                            className="md-icon-wrapper md-icon-auto-scales md-icon-scales md-icon-no-shrink"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className=""
+                              data-autoscale={false}
+                              data-scale={16}
+                              data-test="arrow-down"
+                              fill="currentColor"
+                              height="100%"
+                              style={{}}
+                              viewBox="0, 0, 32, 32"
+                              width="100%"
+                            />
+                          </div>
+                        </Icon>
+                      </span>
+                    </button>
+                  </FocusRing>
+                </FocusRing>
+              </ButtonSimple>
+            </span>
+            <Portal
+              containerInfo={
+                <div
+                  data-tippy-root=""
+                  id="tippy-2"
+                  style="z-index: 9999;"
+                >
+                  
+                </div>
+              }
+            />
+          </Tippy>
+        </ForwardRef(TippyWrapper)>
+      </LazyTippy>
+    </Popover>
+  </div>
+</ComboBox>
+`;
diff --git a/src/components/ListItemBase/ListItemBase.style.scss b/src/components/ListItemBase/ListItemBase.style.scss
index 0bf8c5a4cb..7c1b31dd0d 100644
--- a/src/components/ListItemBase/ListItemBase.style.scss
+++ b/src/components/ListItemBase/ListItemBase.style.scss
@@ -91,7 +91,7 @@
     // trim any type of text inside
     p,
     span,
-    div {
+    div,
     .md-text-wrapper {
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/src/components/TextInput/TextInput.unit.test.tsx.snap b/src/components/TextInput/TextInput.unit.test.tsx.snap
index 4f8f87e221..ab5d528437 100644
--- a/src/components/TextInput/TextInput.unit.test.tsx.snap
+++ b/src/components/TextInput/TextInput.unit.test.tsx.snap
@@ -62,6 +62,43 @@ exports[`<TextInput/> snapshot should match snapshot with className 1`] = `
 `;
 
 exports[`<TextInput/> snapshot should match snapshot with clearAriaLabel 1`] = `
+<SSRProvider>
+  <TextInput
+    id="example-id"
+    label="Password"
+  >
+    <div
+      className="md-text-input-wrapper"
+      data-focus={false}
+      data-level="none"
+      onClick={[Function]}
+    >
+      <label
+        htmlFor="test-ID"
+        id="desc-test-ID"
+      >
+        Password
+      </label>
+      <div
+        className="md-text-input-container"
+      >
+        <input
+          aria-labelledby="test-ID"
+          disabled={false}
+          id="test-ID"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          readOnly={false}
+          type="text"
+        />
+      </div>
+    </div>
+  </TextInput>
+</SSRProvider>
+`;
+
+exports[`<TextInput/> snapshot should match snapshot with clearAriaLabel 2`] = `
 <SSRProvider>
   <TextInput
     clearAriaLabel="Clear this input"