fix(ld-input): type file not dispatching in safari

src/liquid/components/ld-input/ld-input.css

@@ -1,3 +1,7 @@
+:host > input [type='file'] {
+  pointer-events: none; /* important for Safari */
+}
+
 :host,
 .ld-input {
   --ld-input-padding-x-sm: 0.5rem;
@@ -66,18 +70,30 @@
     box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col);
   }
 
+  :where(input) {
+    margin: 0; /* margin reset for Safari */
+  }
+
   ::slotted(*),
   > :where(:not(input):not(textarea)) {
     user-select: none;
   }
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='start']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='end']):first-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='end']
+        ):first-child
+    ) {
     margin-left: var(--ld-input-padding-x-md);
   }
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='end']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='start']):last-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='start']
+        ):last-child
+    ) {
     margin-right: var(--ld-input-padding-x-md);
   }
 
@@ -89,10 +105,6 @@
     &[type='file'] {
       opacity: 0;
 
-      &:not(:disabled):not([aria-disabled='true']) {
-        cursor: pointer;
-      }
-
       &::-webkit-file-upload-button {
         display: none;
       }
@@ -251,12 +263,20 @@
   min-height: var(--ld-input-min-height-sm);
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='start']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='end']):first-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='end']
+        ):first-child
+    ) {
     margin-left: var(--ld-input-padding-x-sm);
   }
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='end']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='start']):last-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='start']
+        ):last-child
+    ) {
     margin-right: var(--ld-input-padding-x-sm);
   }
 
@@ -303,12 +323,20 @@
   min-height: var(--ld-input-min-height-lg);
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='start']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='end']):first-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='end']
+        ):first-child
+    ) {
     margin-left: var(--ld-input-padding-x-lg);
   }
 
   ::slotted(:not(ld-button):not(.ld-button)[slot='end']),
-  > :where(:not(input):not(textarea):not(ld-button):not(.ld-button):not([slot='start']):last-child) {
+  > :where(
+      :not(input):not(textarea):not(ld-button):not(.ld-button):not(
+          [slot='start']
+        ):last-child
+    ) {
     margin-right: var(--ld-input-padding-x-lg);
   }
 
@@ -357,8 +385,14 @@
 }
 
 @media (hover: hover) {
-  :host(:not(.ld-input--invalid):not([aria-disabled='true']):not(.ld-input--disabled):hover:not(:focus-within)),
-  .ld-input:not(.ld-input--invalid):not([aria-disabled='true']):not(.ld-input--disabled):hover:not(:focus-within) {
+  :host(
+      :not(.ld-input--invalid):not([aria-disabled='true']):not(
+          .ld-input--disabled
+        ):hover:not(:focus-within)
+    ),
+  .ld-input:not(.ld-input--invalid):not([aria-disabled='true']):not(
+      .ld-input--disabled
+    ):hover:not(:focus-within) {
     &::before {
       box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-border-col-hover);
     }
@@ -382,8 +416,14 @@
   background-color: var(--ld-input-bg-col-invalid-focus);
 }
 
-:host(.ld-input--invalid:not(.ld-input--disabled):not([aria-disabled='true']):where(:not(:focus))),
-.ld-input--invalid:not(.ld-input--disabled):not([aria-disabled='true']):where(:not(:focus)) {
+:host(
+    .ld-input--invalid:not(.ld-input--disabled):not(
+        [aria-disabled='true']
+      ):where(:not(:focus))
+  ),
+.ld-input--invalid:not(.ld-input--disabled):not([aria-disabled='true']):where(
+    :not(:focus)
+  ) {
   background-color: var(--ld-input-bg-col-invalid);
   color: var(--ld-input-text-col-invalid);
 }
@@ -416,8 +456,14 @@
   }
 }
 
-:host(.ld-input--invalid:not(.ld-input--disabled):not([aria-disabled='true']):focus-within),
-.ld-input--invalid:not(.ld-input--disabled):not([aria-disabled='true']):focus-within {
+:host(
+    .ld-input--invalid:not(.ld-input--disabled):not(
+        [aria-disabled='true']
+      ):focus-within
+  ),
+.ld-input--invalid:not(.ld-input--disabled):not(
+    [aria-disabled='true']
+  ):focus-within {
   background-color: var(--ld-input-bg-col-invalid-focus);
 
   > input,

src/liquid/components/ld-input/ld-input.tsx

@@ -248,6 +248,7 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
     this.attributesObserver = cloneAttributes.call(this, [
       'multiline',
       'autocomplete',
+      'value',
     ])
 
     const outerForm = this.el.closest('form')
@@ -295,7 +296,9 @@ export class LdInput implements InnerFocusable, ClonesAttributes {
   }
 
   private handleClick = (ev: MouseEvent) => {
-    const target = ev.target as HTMLElement
+    const target = (
+      'composedPath' in ev ? ev.composedPath()[0] : ev['target']
+    ) as HTMLElement
     if (
       this.el.hasAttribute('disabled') ||
       this.el.getAttribute('aria-disabled') === 'true'

src/liquid/components/ld-input/readme.md

@@ -216,7 +216,11 @@ Triggerts associated keyboard in supporting browsers and devices with dynamic ke
 ### Type file
 
 {% example %}
-<ld-input placeholder="Your profile image" type="file"></ld-input>
+<ld-input placeholder="Your profile image" type="file" accept="image/png, image/jpeg"></ld-input>
+
+<!-- React component -->
+
+<LdInput placeholder="Your profile image" type="file" accept="image/png, image/jpeg" />
 {% endexample %}
 
 ### Type number

src/liquid/components/ld-input/test/ld-input.spec.ts

@@ -220,6 +220,28 @@ describe('ld-input', () => {
     expect(dispatchSpy).toHaveBeenCalledWith(
       expect.objectContaining({ bubbles: false })
     )
+    expect(dispatchSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not forward click to input if the input is the event target', async () => {
+    const { root } = await newSpecPage({
+      components: [LdInput],
+      html: `<ld-input />`,
+    })
+    const input = root.shadowRoot.querySelector('input')
+
+    input.focus = jest.fn()
+    const dispatchSpy = jest.spyOn(input, 'dispatchEvent')
+
+    const ev = {
+      type: 'click',
+      bubbles: true,
+      composed: true,
+      composedPath: () => [input],
+    } as unknown as MouseEvent
+    root.dispatchEvent(ev)
+
+    expect(dispatchSpy).not.toHaveBeenCalled()
   })
 
   it('forwards click to input (multiline)', async () => {