From 44e77fdf2b71f8afada7a6ef1322820a570ee02f Mon Sep 17 00:00:00 2001
From: Abdul Rehman <76230556+Abdulrehman-PIAIC80387@users.noreply.github.com>
Date: Wed, 15 Apr 2026 22:15:37 +0500
Subject: [PATCH] fix(explore): dispatch onChange immediately on NumberControl
 stepper arrow clicks (#39220)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../controls/NumberControl/NumberControl.test.tsx | 15 +++++++++++++++
 .../components/controls/NumberControl/index.tsx   |  6 ++++++
 2 files changed, 21 insertions(+)

diff --git a/superset-frontend/src/explore/components/controls/NumberControl/NumberControl.test.tsx b/superset-frontend/src/explore/components/controls/NumberControl/NumberControl.test.tsx
index 422b8394333..7ece02addb2 100644
--- a/superset-frontend/src/explore/components/controls/NumberControl/NumberControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/NumberControl/NumberControl.test.tsx
@@ -82,6 +82,21 @@ test('can clear field completely', async () => {
   expect(props.onChange).toHaveBeenLastCalledWith(undefined);
 });
 
+test('stepper arrows trigger onChange immediately', async () => {
+  const props = {
+    ...mockedProps,
+    value: 5,
+    onChange: jest.fn(),
+  };
+  render(<NumberControl {...props} />);
+  const upButton = document.querySelector(
+    '.ant-input-number-handler-up',
+  ) as HTMLElement;
+  expect(upButton).toBeInTheDocument();
+  await userEvent.click(upButton);
+  expect(props.onChange).toHaveBeenCalledWith(6);
+});
+
 test('updates local value when prop changes', () => {
   const props = {
     ...mockedProps,
diff --git a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
index ec2eb7c9c6e..db7d85b97a0 100644
--- a/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
+++ b/superset-frontend/src/explore/components/controls/NumberControl/index.tsx
@@ -71,6 +71,11 @@ export default function NumberControl({
     onChange?.(pendingValueRef.current);
   };
 
+  const handleStep = (val: number) => {
+    pendingValueRef.current = val;
+    onChange?.(val);
+  };
+
   return (
     <FullWidthDiv>
       <ControlHeader {...rest} />
@@ -82,6 +87,7 @@ export default function NumberControl({
         value={value}
         onChange={handleChange}
         onBlur={handleBlur}
+        onStep={handleStep}
         disabled={disabled}
         aria-label={rest.label}
       />