can't trigger 'onChange' for an input type='range' rendered by React

[rluncasu]

Current behavior:

...
return (
...
<div className="search-bar__form-range">
  <input type="range" min={10} max={900} step={10} value={500} onChange={(event)=>alert(`slider changed
  to:${event.target.value}`)}
  />
...

cy.get('.search-bar__form-range > input[type=range]').as('range').invoke('val', 700)
  .trigger('change');

Changes the slider value.
Doesn't trigger the onChange handler.

Desired behavior:

should trigger the onChange handler

Steps to reproduce:

Set up a React app with an input type='range' and an onChange handler
Try to trigger the onChange event from cypress.

Versions

"cypress": "^2.1.0"
"react": "^15.4.2"

[jennifer-shehane]

Can confirm, onChange is not triggered in the example above within a react project - not sure if it is specifically a React issue though.

[rluncasu]

ok, so I've found sort of a workaround.
it looks like the onInput event can be triggered just fine. In the case of input type='range' the "input" event is triggered in the same situation as the "change" is so I was able to switch it.

Workaround would be: use onInput with .trigger('input') instead of onChange

[excitement-engineer]

I am also running into the same issue.

[annezhou920]

I'm encountering the same issue. Using .trigger('input') instead of the change event also didn't affect anything.

I've been playing around with a number of combinations using click, mousedown, mousemove, mousemove to trigger an interaction on an input type='range', but nothing seems to work.

So far, I have this piece of code that sets and changes the value of the input in the DOM, and it moves the range slider (the circle knob), but the input still doesn't recognize that there's an interaction:

cy.get('input[type=range]').eq(0)
  .then(($el) => {
    cy.wrap($el)
      .click(200, 15)
      .invoke('val', 2)
      .trigger('change', { force: true })
      .invoke('attr', 'value', 2)
  });

I've tried .click(), .click('left'), and .click(200, 15) -- positional clicking within the input, but Cypress doesn't click on the input.

Does anyone know a good way of triggering an onChange event? Is this an actual bug?

[sbasinger]

Same issue here. Holler if anyone knows any workarounds.

Code:

handleSlider = event => {
  this.setState({
    value: event.target.value,
  });
};

<StyledSliderValue>
  <SliderValue data-test="weeds-slider-value">{this.state.value} per acre</SliderValue>
</StyledSliderValue>
<SliderInput
  onChange={this.handleSlider}
  type="range"
  min="0"
  max="1000"
  step="100"
  value={this.state.value}
  data-test="weeds-slider"
/>

Cypress test:

it('updates value on slider', ()=> {
  cy.get('[data-test="weeds-slider"]')
    .invoke('val', 500)
    .trigger('input')
    .click()

  cy.get('[data-test="weeds-slider-value"]')
    .should('have.text', '500 per acre')
})

In Cypress, I can see the slider knob move to the center, but the value does not change. In my app, everything works fine. I've tried .trigger('change') and .trigger('input') and several different .click(), but no luck.

[davemyersworld]

I have put together a workaround for this issue that does not require switching to the input event.

There are two parts:

1. Set the value of the underlying DOM node (avoiding React's override)
2. Fire a change event on it such that React picks up the change.

That works like this:

// React overrides the DOM node's setter, so get the original, as per the linked Stack Overflow
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
describe('Range', () => {
  it('Updates the value and UI when changing a range input', () => {
    cy.get('input[type="range"]').then(($range) => {
      // get the DOM node
      const range = $range[0];
      // set the value manually
      nativeInputValueSetter.call(range, 15);
      // now dispatch the event
      range.dispatchEvent(new Event('change', { value: 15, bubbles: true }));
    });
  });
});

I'm fairly new to the cypress ecosystem, so perhaps someone can do this in a more cypress-y way, but this solves the problem.

[annezhou920]

thank you @davemyersworld! that fixed the issue for me!!

[Elshaikh]

@jennifer-shehane @annezhou920 @davemyersworld
Need your help as now i can interact with price slider , but price filtration not impacted
HTML

<div class="horizontal-slider" style="position: relative;">
    <div class="bar bar-0" style="position: absolute; left: 0px; right: 225px; will-change: left, right;"></div>
    <div class="bar bar-1" style="position: absolute; left: 0px; right: 0.0139758px; will-change: left, right;"></div>
    <div class="bar bar-2" style="position: absolute; left: 224.986px; right: 0px; will-change: left, right;"></div>
    <div class="handle handle-0 " tabindex="0" role="slider" aria-valuenow="162.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 1; left: 0px;"></div>
    <div class="handle handle-1 " tabindex="0" role="slider" aria-valuenow="9177.08" aria-valuemin="162.08"
         aria-valuemax="9177.64" style="position: absolute; z-index: 2; left: 224.986px;"></div>
</div>

cypress step

cy.get('#content-section div.horizontal-slider')
  .find('div.handle.handle-1')
  .invoke('attr', 'style', "position: absolute; z-index: 1; left: 150.025px; will-change: left;")
  .trigger('change')
cy.get('#content-section div.horizontal-slider')
  .find('div.handle.handle-0')
  .invoke('attr', 'style', "position: absolute; z-index: 1; left: 56.025px; will-change: left;")
  .click()

[beausmith]

✋ Also effected by this same issue:

The input[type='range'] html element updates visually in the Cypress testing window, however .trigger('change') does not trigger the onChange callback function for the range input.

HTML

<label for="font-size">Font Size</label>
<input type="range" id="font-size" min="0" max="3" step="1" value="1">

Cypress

cy.get('#font-size')
  .invoke('val', 0)
  .trigger('change')

Workaround 🎉

I have implemented @davemyersworld's workaround, and can confirm it works! 👍

I've taken his example a wee further and abstracted a higher order function to perform the input value change. Here is the Cypress test to change and test the input range value from 0 to 1 to 2 to 3:

// TODO: Remove `.then()` workaround and replace with commented steps when
// issue is resolved: https://github.com/cypress-io/cypress/issues/1570
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
).set
const changeRangeInputValue = $range => value => {
  nativeInputValueSetter.call($range[0], value)
  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}
describe('Font Settings', () => {
  it('User can adjust font settings', () => {
    cy.visit('/settings')
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '24px')
    cy.get('#font-size')
      // .invoke('val', 0)
      // .trigger('change')
      .then(input => changeRangeInputValue(input)(0))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '18px')
    cy.get('#font-size')
      // .invoke('val', 1)
      // .trigger('change')
      .then(input => changeRangeInputValue(input)(1))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '24px')
    cy.get('#font-size')
      //   .invoke('val', 2)
      //   .trigger('change')
      .then(input => changeRangeInputValue(input)(2))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '44px')
    cy.get('#font-size')
      //   .invoke('val', 3)
      //   .trigger('change')
      .then(input => changeRangeInputValue(input)(3))
    cy.contains('Sample text.')
      .should('have.css', 'font-size')
      .should('eq', '50px')
  }
}

Looking forward to replacing workaround when a fix is available.

Thanks for triaging @jennifer-shehane