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"
  )