Merge pull request #3533 from Shopify/use-current-target-consistently

JoviDeCroock · web-flow · commit b0b04c7d87ea · 2025-10-30T12:20:26.000+01:00
Use currentTarget consistently
diff --git a/packages/ui-extensions/docs/surfaces/admin/staticPages/examples/form-default-value.jsx b/packages/ui-extensions/docs/surfaces/admin/staticPages/examples/form-default-value.jsx
@@ -21,14 +21,14 @@ return (
           name="my-text"
           defaultValue={defaultValues.text}
           value={textValue}
-          onChange={(e) => setTextValue(e.target.value)}
+          onChange={(e) => setTextValue(e.currentTarget.value)}
         />
         <s-number-field
           label="Percentage field"
           name="my-number"
           defaultValue={defaultValues.number}
           value={numberValue}
-          onChange={(e) => setNumberValue(e.target.value)}
+          onChange={(e) => setNumberValue(e.currentTarget.value)}
         />
       </s-stack>
     </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/admin/staticPages/examples/form-implicit-default.jsx b/packages/ui-extensions/docs/surfaces/admin/staticPages/examples/form-implicit-default.jsx
@@ -30,13 +30,13 @@ function App({text, number}) {
             label="Default Value"
             name="my-text"
             value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
+            onChange={(e) => setTextValue(e.currentTarget.value)}
           />
           <s-number-field
             label="Percentage field"
             name="my-number"
             value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
+            onChange={(e) => setNumberValue(e.currentTarget.value)}
           />
         </s-stack>
       </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/examples/checkout/default.example.tsx b/packages/ui-extensions/docs/surfaces/checkout/reference/examples/checkout/default.example.tsx
@@ -22,7 +22,7 @@ function Extension() {
   );
 
   async function onCheckboxChange(event) {
-    const isChecked = event.target.checked;
+    const isChecked = event.currentTarget.checked;
     // 2. Check if the API is available
     if (
       !shopify.instructions.value.attributes
diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/form-default-value.jsx b/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/form-default-value.jsx
@@ -22,14 +22,14 @@ function Extension() {
             name="my-text"
             defaultValue={defaultValues.text}
             value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
+            onChange={(e) => setTextValue(e.currentTarget.value)}
           />
           <s-number-field
             label="Percentage field"
             name="my-number"
             defaultValue={defaultValues.number}
             value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
+            onChange={(e) => setNumberValue(e.currentTarget.value)}
           />
         </s-stack>
       </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/form-implicit-default.jsx b/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/form-implicit-default.jsx
@@ -23,13 +23,13 @@ function App({text, number}) {
             label="Default Value"
             name="my-text"
             value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
+            onChange={(e) => setTextValue(e.currentTarget.value)}
           />
           <s-number-field
             label="Percentage field"
             name="my-number"
             value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
+            onChange={(e) => setNumberValue(e.currentTarget.value)}
           />
         </s-stack>
       </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/apis-new.tsx b/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/apis-new.tsx
@@ -15,17 +15,13 @@ function Extension() {
 }
 
 async function onCheckboxChange(event) {
-  const isChecked = event.target.checked;
+  const isChecked = event.currentTarget.checked;
 
-  const result =
-    await shopify.applyAttributeChange({
-      type: 'updateAttribute',
-      key: 'includeGift',
-      value: isChecked ? 'yes' : 'no',
-    });
+  const result = await shopify.applyAttributeChange({
+    type: 'updateAttribute',
+    key: 'includeGift',
+    value: isChecked ? 'yes' : 'no',
+  });
 
-  console.log(
-    'applyAttributeChange result',
-    result,
-  );
+  console.log('applyAttributeChange result', result);
 }
diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/hooks-new.tsx b/packages/ui-extensions/docs/surfaces/checkout/staticPages/examples/upgrading-to-2025-10/hooks-new.tsx
@@ -8,9 +8,7 @@ export default function extension() {
 }
 
 function Extension() {
-  const [includeGift] = useAttributeValues([
-    'includeGift',
-  ]);
+  const [includeGift] = useAttributeValues(['includeGift']);
   return (
     <s-checkbox
       checked={includeGift === 'yes'}
@@ -21,17 +19,13 @@ function Extension() {
 }
 
 async function onCheckboxChange(event) {
-  const isChecked = event.target.checked;
+  const isChecked = event.currentTarget.checked;
 
-  const result =
-    await shopify.applyAttributeChange({
-      type: 'updateAttribute',
-      key: 'includeGift',
-      value: isChecked ? 'yes' : 'no',
-    });
+  const result = await shopify.applyAttributeChange({
+    type: 'updateAttribute',
+    key: 'includeGift',
+    value: isChecked ? 'yes' : 'no',
+  });
 
-  console.log(
-    'applyAttributeChange result',
-    result,
-  );
+  console.log('applyAttributeChange result', result);
 }
diff --git a/packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/sheet-consent-banner-with-form.example.jsx b/packages/ui-extensions/docs/surfaces/customer-account/reference/examples/apis/sheet-consent-banner-with-form.example.jsx
@@ -36,7 +36,7 @@ function Extension() {
     return function (event) {
       setConsentFormValues({
         ...consentFormValues,
-        [key]: event.target.checked,
+        [key]: event.currentTarget.checked,
       });
     };
   };
diff --git a/packages/ui-extensions/docs/surfaces/customer-account/staticPages/examples/form-default-value.jsx b/packages/ui-extensions/docs/surfaces/customer-account/staticPages/examples/form-default-value.jsx
@@ -23,14 +23,14 @@ function Extension() {
             name="my-text"
             defaultValue={defaultValues.text}
             value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
+            onChange={(e) => setTextValue(e.currentTarget.value)}
           />
           <s-number-field
             label="Percentage field"
             name="my-number"
             defaultValue={defaultValues.number}
             value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
+            onChange={(e) => setNumberValue(e.currentTarget.value)}
           />
         </s-stack>
       </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/customer-account/staticPages/examples/form-implicit-default.jsx b/packages/ui-extensions/docs/surfaces/customer-account/staticPages/examples/form-implicit-default.jsx
@@ -24,13 +24,13 @@ function App({text, number}) {
             label="Default Value"
             name="my-text"
             value={textValue}
-            onChange={(e) => setTextValue(e.target.value)}
+            onChange={(e) => setTextValue(e.currentTarget.value)}
           />
           <s-number-field
             label="Percentage field"
             name="my-number"
             value={numberValue}
-            onChange={(e) => setNumberValue(e.target.value)}
+            onChange={(e) => setNumberValue(e.currentTarget.value)}
           />
         </s-stack>
       </s-form>
diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/product-search-api/search-products.jsx b/packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/product-search-api/search-products.jsx
@@ -9,7 +9,7 @@ const Extension = () => {
   const [searchResults, setSearchResults] = useState([]);
 
   const search = async (event) => {
-    const results = await shopify.productSearch.searchProducts({queryString: event.target.value});
+    const results = await shopify.productSearch.searchProducts({queryString: event.currentTarget.value});
     setSearchResults(results.items);
   };
 
diff --git a/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html b/packages/ui-extensions/src/surfaces/admin/components/DatePicker/examples/analytics-dashboard.html
@@ -11,7 +11,7 @@
     id="analytics-picker"
     value="2025-01-01--2025-01-31"
     view="2025-01"
-    onchange="console.log('Date range changed:', event.target.value)"
+    onchange="console.log('Date range changed:', event.currentTarget.value)"
   ></s-date-picker>
   <s-text id="selected-range">
     Selected range: 2025-01-01--2025-01-31
@@ -24,7 +24,7 @@
 
   // Handle picker changes
   picker.addEventListener('change', (event) => {
-    display.textContent = `Selected range: ${event.target.value}`;
+    display.textContent = `Selected range: ${event.currentTarget.value}`;
   });
 
   // Quick selection buttons
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/examples/event-handling.jsx
@@ -1,6 +1,6 @@
 <s-choice-list
-  onChange={(event) => console.log('onChange:', event.target.values)}
-  onInput={(event) => console.log('onInput:', event.target.values)}
+  onChange={(event) => console.log('onChange:', event.currentTarget.values)}
+  onInput={(event) => console.log('onInput:', event.currentTarget.values)}
 >
   <s-choice value="option1">Option 1</s-choice>
   <s-choice value="option2" disabled>Option 2 (disabled)</s-choice>
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/examples/multiple-selection.jsx
@@ -1,7 +1,7 @@
 <s-choice-list 
   multiple
   values={['small', 'medium']}
-  onChange={(event) => console.log('Selected:', event.target.values)}
+  onChange={(event) => console.log('Selected:', event.currentTarget.values)}
 >
   <s-choice value="small">Small</s-choice>
   <s-choice value="medium">Medium</s-choice>
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/DateField/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/DateField/examples/event-handling.jsx
@@ -1,8 +1,8 @@
 <s-date-field 
   label="Order date"
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
-  onFocus={(event) => console.log('Focused with:', event.target.value)}
-  onBlur={(event) => console.log('Blurred with:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
+  onFocus={(event) => console.log('Focused with:', event.currentTarget.value)}
+  onBlur={(event) => console.log('Blurred with:', event.currentTarget.value)}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/DatePicker/examples/command-system.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/DatePicker/examples/command-system.jsx
@@ -5,6 +5,6 @@
   <s-date-picker
     id="date-picker"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/DatePicker/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/DatePicker/examples/event-handling.jsx
@@ -1,7 +1,7 @@
 <s-date-picker 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/DateSpinner/examples/command-system.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/DateSpinner/examples/command-system.jsx
@@ -5,6 +5,6 @@
   <s-date-spinner
     id="date-spinner"
     value="2024-10-26"
-    onChange={(event) => console.log('Date selected:', event.target.value)}
+    onChange={(event) => console.log('Date selected:', event.currentTarget.value)}
   />
 </>;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/DateSpinner/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/DateSpinner/examples/event-handling.jsx
@@ -1,7 +1,7 @@
 <s-date-spinner 
   value="2024-10-26"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/EmailField/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/EmailField/examples/event-handling.jsx
@@ -1,8 +1,8 @@
 <s-email-field
   label="Customer email"
   placeholder="customer@example.com"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focus')}
   onBlur={(event) => console.log('Blur')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/NumberField/examples/controls-constraints.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/NumberField/examples/controls-constraints.jsx
@@ -4,6 +4,6 @@
   min={1}
   max={100}
   controls
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
 />;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/NumberField/examples/input-mode.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/NumberField/examples/input-mode.jsx
@@ -3,13 +3,13 @@
     label="Price"
     placeholder="0.00"
     inputMode="decimal"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 
   <s-number-field
     label="Stock count"
     placeholder="0"
     inputMode="numeric"
-    onInput={(event) => console.log('Value:', event.target.value)}
+    onInput={(event) => console.log('Value:', event.currentTarget.value)}
   />
 </s-stack>;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/SearchField/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/SearchField/examples/event-handling.jsx
@@ -1,8 +1,8 @@
 <s-search-field
   placeholder="Search products..."
   value=""
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Search focused')}
   onBlur={(event) => console.log('Search blurred')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TextArea/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TextArea/examples/event-handling.jsx
@@ -1,8 +1,8 @@
 <s-text-area
   label="Customer feedback"
   placeholder="Enter feedback..."
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TextArea/examples/rows-configuration.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TextArea/examples/rows-configuration.jsx
@@ -3,5 +3,5 @@
   placeholder="Add special instructions..."
   rows={5}
   maxLength={500}
-  onInput={(event) => console.log('Characters:', event.target.value.length)}
+  onInput={(event) => console.log('Characters:', event.currentTarget.value.length)}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TextField/examples/common-props.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TextField/examples/common-props.jsx
@@ -7,5 +7,5 @@
   disabled={isProcessing}
   required
   maxLength={20}
-  onChange={(event) => setSku(event.target.value)}
+  onChange={(event) => setSku(event.currentTarget.value)}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TextField/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TextField/examples/event-handling.jsx
@@ -2,16 +2,16 @@
   label="Product SKU"
   placeholder="Enter SKU"
   onInput={(event) => {
-    console.log('Input:', event.target.value);
-    console.log('Current error:', event.target.error);
+    console.log('Input:', event.currentTarget.value);
+    console.log('Current error:', event.currentTarget.error);
   }}
   onFocus={(event) => {
-    console.log('Focused with value:', event.target.value);
+    console.log('Focused with value:', event.currentTarget.value);
   }}
   onBlur={(event) => {
-    console.log('Blurred with value:', event.target.value);
+    console.log('Blurred with value:', event.currentTarget.value);
   }}
   onChange={(event) => {
-    console.log('Changed to:', event.target.value);
+    console.log('Changed to:', event.currentTarget.value);
   }}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/examples/event-handling.jsx
@@ -1,8 +1,8 @@
 <s-time-field
   label="Appointment time"
   value="14:30"
-  onInput={(event) => console.log('Input:', event.target.value)}
-  onChange={(event) => console.log('Change:', event.target.value)}
+  onInput={(event) => console.log('Input:', event.currentTarget.value)}
+  onChange={(event) => console.log('Change:', event.currentTarget.value)}
   onFocus={(event) => console.log('Focused')}
   onBlur={(event) => console.log('Blurred')}
 />
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimePicker/examples/command-system.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimePicker/examples/command-system.jsx
@@ -5,6 +5,6 @@
   <s-time-picker
     id="time-picker"
     value="14:30"
-    onChange={(event) => console.log('Time selected:', event.target.value)}
+    onChange={(event) => console.log('Time selected:', event.currentTarget.value)}
   />
 </>;
diff --git a/packages/ui-extensions/src/surfaces/point-of-sale/components/TimePicker/examples/event-handling.jsx b/packages/ui-extensions/src/surfaces/point-of-sale/components/TimePicker/examples/event-handling.jsx
