Fix issues raised by tests

Author: KoolADE85

components/dash-core-components/src/components/Input.tsx

@@ -286,7 +286,7 @@ const defaultProps: Partial<InputProps> = {
  * the Checklist and RadioItems component. Dates, times, and file uploads
  * are also supported through separate components.
  */
-export default function Input(props: InputProps) {
+function Input(props: InputProps) {
     props = {...defaultProps, ...props};
     const input = useRef(document.createElement('input'));
     const [value, setValue] = useState<InputProps['value']>(props.value);
@@ -426,11 +426,6 @@ export default function Input(props: InputProps) {
     }, [props.value, props.type, pendingEvent]);
 
     useEffect(() => {
-        // Skip this effect if the value change came from props update (not user input)
-        if (value === props.value) {
-            return;
-        }
-
         const {debounce, type} = props;
         const {selectionStart: cursorPosition} = input.current;
         if (debounce) {
@@ -448,7 +443,7 @@ export default function Input(props: InputProps) {
         } else {
             onEvent();
         }
-    }, [value, props.debounce, props.value]);
+    }, [value, props.debounce, props.type]);
 
     const pickedInputs = pick(inputProps, props);
 
@@ -466,14 +461,13 @@ export default function Input(props: InputProps) {
         <LoadingElement>
             {loadingProps => (
                 <div
-                    id={props.id}
                     className={`dash-input-container ${className}${
                         props.type === 'hidden' ? ' dash-input-hidden' : ''
                     }`.trim()}
                     style={props.style}
                 >
                     <input
-                        id={inputId}
+                        id={props.id || inputId}
                         ref={input}
                         className="dash-input-element"
                         onBlur={onBlur}
@@ -490,7 +484,7 @@ export default function Input(props: InputProps) {
                             className="dash-input-stepper dash-stepper-decrement"
                             onClick={() => handleStepperClick('decrement')}
                             disabled={isDecrementDisabled}
-                            aria-controls={inputId}
+                            aria-controls={props.id || inputId}
                             aria-label="Decrease value"
                         >
                             −
@@ -502,7 +496,7 @@ export default function Input(props: InputProps) {
                             className="dash-input-stepper dash-stepper-increment"
                             onClick={() => handleStepperClick('increment')}
                             disabled={isIncrementDisabled}
-                            aria-controls={inputId}
+                            aria-controls={props.id || inputId}
                             aria-label="Increase value"
                         >
                             +
@@ -513,3 +507,10 @@ export default function Input(props: InputProps) {
         </LoadingElement>
     );
 }
+
+Input.dashPersistence = pick(
+    ['persisted_props', 'persistence_type'],
+    defaultProps
+);
+
+export default Input;

components/dash-core-components/tests/assets/input.css

@@ -1,4 +1,4 @@
-.test-input-css input {
+.test-input-css {
     width: 420px;
     border-color: hotpink;
 }

components/dash-core-components/tests/integration/input/test_input_basics.py

@@ -62,14 +62,14 @@ def cb_render(*vals):
 def test_inbs002_user_class(dash_dcc):
     app = Dash(__name__, assets_folder="../../assets")
 
-    app.layout = html.Div(className="test-input-css", children=[dcc.Input()])
+    app.layout = dcc.Input(className="test-input-css")
 
     dash_dcc.start_server(app)
 
     dash_dcc.wait_for_style_to_equal(
-        ".test-input-css input", "borderColor", "rgb(255, 105, 180)"
+        ".test-input-css", "borderColor", "rgb(255, 105, 180)"
     )
-    dash_dcc.wait_for_style_to_equal(".test-input-css input", "width", "420px")
+    dash_dcc.wait_for_style_to_equal(".test-input-css", "width", "420px")
 
     assert dash_dcc.get_logs() == []
 
@@ -97,7 +97,7 @@ def test_inbs003_styles_are_scoped(dash_dcc):
     dash_dcc.start_server(app)
 
     external_input = dash_dcc.find_element("#ExternalInput")
-    dash_input = dash_dcc.find_element(".unittest")
+    dash_input = dash_dcc.find_element("#DashInput")
 
     external_outline_css = external_input.value_of_css_property("outline")
     dash_outline_css = dash_input.value_of_css_property("outline")

components/dash-core-components/tests/integration/input/test_number_input.py

@@ -67,6 +67,60 @@ def test_inni003_invalid_numbers_range(dash_dcc, input_range_app):
     assert dash_dcc.get_logs() == []
 
 
+def test_inni004_steppers(dash_dcc, debounce_number_app):
+    dash_dcc.start_server(debounce_number_app)
+
+    # Test input with min=10, max=10000, step=3 (#input-fast)
+    input_elem = dash_dcc.find_element("#input-fast")
+    increment_btn = dash_dcc.find_element("#input-fast~.dash-stepper-increment")
+    decrement_btn = dash_dcc.find_element("#input-fast~.dash-stepper-decrement")
+
+    # Verify steppers exist
+    assert increment_btn.is_displayed(), "Increment stepper should be visible"
+    assert decrement_btn.is_displayed(), "Decrement stepper should be visible"
+
+    # Set initial value to 100
+    input_elem.send_keys("100")
+    dash_dcc.wait_for_text_to_equal("#div-fast", "100")
+
+    # Test increment stepper - should increase by step=3
+    increment_btn.click()
+    dash_dcc.wait_for_text_to_equal("#div-fast", "103")
+
+    # Test decrement stepper - should decrease by step=3
+    decrement_btn.click()
+    dash_dcc.wait_for_text_to_equal("#div-fast", "100")
+
+    # Test multiple increments
+    increment_btn.click()
+    increment_btn.click()
+    dash_dcc.wait_for_text_to_equal("#div-fast", "106")
+
+    # Test that steppers respect min constraint
+    dash_dcc.clear_input(input_elem)
+    input_elem.send_keys("11")  # Close to min=10
+    decrement_btn.click()  # Should go to 10 (min)
+    dash_dcc.wait_for_text_to_equal("#div-fast", "10")
+
+    # Verify decrement button is disabled at minimum
+    assert (
+        decrement_btn.get_attribute("disabled") == "true"
+    ), "Decrement should be disabled at minimum"
+
+    # Test that steppers respect max constraint
+    dash_dcc.clear_input(input_elem)
+    input_elem.send_keys("9999")  # Close to max=10000
+    increment_btn.click()  # Should go to 10000 (max)
+    dash_dcc.wait_for_text_to_equal("#div-fast", "10000")
+
+    # Verify increment button is disabled at maximum
+    assert (
+        increment_btn.get_attribute("disabled") == "true"
+    ), "Increment should be disabled at maximum"
+
+    assert dash_dcc.get_logs() == []
+
+
 def test_inni010_valid_numbers(dash_dcc, ninput_app):
     dash_dcc.start_server(ninput_app)
     for num, op in (

tests/integration/renderer/test_external_component.py

@@ -108,7 +108,7 @@ def test_rext002_render_external_component_temp(dash_duo):
 
     dash_duo.find_element(".tab:nth-child(2)").click()
     assert (
-        dash_duo.find_element("#without-id > input").get_attribute("value")
+        dash_duo.find_element("#without-id input").get_attribute("value")
         == "without-id"
     )
 
@@ -120,7 +120,7 @@ def test_rext002_render_external_component_temp(dash_duo):
 
     dash_duo.find_element(".tab:nth-child(2)").click()
     assert (
-        dash_duo.find_element("#without-id > input").get_attribute("value")
+        dash_duo.find_element("#without-id input").get_attribute("value")
         == "without-id"
     )