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

rluncasu · 2018-04-11T21:09:14Z

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 · 2018-04-11T21:23:28Z

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 · 2018-04-12T09:17:41Z

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 · 2018-04-16T15:43:46Z

I am also running into the same issue.

annezhou920 · 2018-12-13T18:36:17Z

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 · 2018-12-21T19:57:48Z

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 · 2019-01-02T19:50:51Z

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

There are two parts:

Set the value of the underlying DOM node (avoiding React's override)
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 · 2019-01-03T19:13:14Z

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

Elshaikh · 2019-03-10T15:57:31Z

@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 · 2019-03-27T23:16:09Z

✋ 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

moshie · 2020-01-23T20:23:39Z

This might help anyone coming here looking for answers but this helped us:

cy.get('[type="range"]')
  .first()
  .invoke('val', 25)
  .trigger('change', { data: '25' })

aquacalc · 2020-03-08T21:33:05Z

Same issue. I was put on track to solving it with the short article "Simulate React On-Change On Controlled Components":

https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04

(Which I since see is the same sol'n as in the SO reference cited above.)

ryanfiller · 2020-03-26T16:19:46Z

It looks like this issue has been solved, but I wanted to put this here in case anyone comes across this in google like I did today -

I was able to register a custom command in in the cypress/support/commands.js file:

Cypress.Commands.add("controlledInputChange", (input, value) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value'
  ).set
  
  const changeInputValue = inputToChange => newValue => {
    nativeInputValueSetter.call(inputToChange[0], newValue)
    inputToChange[0].dispatchEvent(new Event('change', { newValue, bubbles: true }))
  }

  return cy.get(input).then(input => changeInputValue(input)(value))
})

This is used in the test as:

 cy.get('input[type="range"]').eq(0).then(input => {
   value = 10.toString() // or whatever number, but it needs to be a passed in as a string
   cy.controlledInputChange(input, value)
})

Totti10as · 2020-03-31T07:16:25Z

Need some help with the material-ui slider: I didn't manage to move the slider with some value of offset (sideways like)

Current Cypress

  it('Slider test', () => {
   cy.visit('https://material-ui.com/components/slider/')
    cy.get(
      '.jss407 > .MuiGrid-container > .MuiGrid-grid-xs-true > .MuiSlider-root > .MuiSlider-thumb',
    )
      .focus()
      .trigger('mousedown')
      .trigger('mousemove', 0, 20, { which: 1 })
      .trigger('mouseup')
 
  })
})

Versions:

Win10, Chrome 80
Cypress 4.2.0

Perhaps someone can help?

Totti10as · 2020-03-31T15:43:26Z

Need some help with the material-ui slider: I didn't manage to move the slider with some value of offset (sideways like)

Current Cypress
it('Slider test', () => {
cy.visit('https://material-ui.com/components/slider/')
cy.get(
'.jss407 > .MuiGrid-container > .MuiGrid-grid-xs-true > .MuiSlider-root > .MuiSlider-thumb',
)
.focus()
.trigger('mousedown')
.trigger('mousemove', 0, 20, { which: 1 })
.trigger('mouseup')

})
})

Versions:

Win10, Chrome 80

Cypress 4.2.0

Perhaps someone can help?

*** The issue is resolved by the code below: *** - Thx to Vinod Mathew@k.vinodmathew_gitlab ***

it.only('Slider test', () => {
    cy.viewport(1900, 1000);
    cy.visit('https://material-ui.com/components/slider/')
    cy.get('[aria-labelledby="discrete-slider"]').first()
      .trigger('mousedown', { which: 1 }, { force: true })
      .trigger('mousemove', 881, 288, { force: true })
      .trigger('mouseup')

cjoecker · 2020-04-27T13:25:31Z

Has anyone managed to program the workaround with Typescript?

I'm getting always a Type Error - Illegal invocation for this:

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
)?.set

const changeRangeInputValue = ($range: JQuery<HTMLElement>) => (value: number) => {
  nativeInputValueSetter?.call($range[0], value)

  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}

YuanGaoo · 2020-05-26T23:25:21Z

I'm still not able to trigger the slider. Can someone give help?

cy.get('@field') .eq(index) .find("[role='slider']") .trigger('mousedown', { which: 1 }, { force: true }) .trigger('mousemove', 32, 22, { force: true }) .trigger('mouseup')

YuanGaoo · 2020-05-26T23:26:15Z

I'm still now able to trigger the slider. Can someone give help?

cy.get('@field') .eq(index) .find("[role='slider']") .trigger('mousedown', { which: 1 }, { force: true }) .trigger('mousemove', 32, 22, { force: true }) .trigger('mouseup')

It not moving the slider

neilsud · 2020-07-17T09:14:55Z

Hi @Elshaikh are you available to solve the slider? i have similar slider type with you and cant make the slider move

<div data-testid="range-slider-handle" class="crang-slider-handle" tabindex="0" aria-valuemax="12345" aria-valuemin="0" aria-valuenow="0" draggable="false" role="slider" style="position: absolute; z-index: 0; cursor: grab; user-select: none; touch-action: none; transform: translate(-8px, -6px);">
  <span data-label="12" class="crang-slider-handle-label is-default" style="padding: 0px 15px;">$0</span>
</div>

eFFeeMMe · 2020-09-30T12:14:27Z

I was also running into this issue and had to use beausmith's workaround (adapted from Dave Myers').

I had to make a couple further adjustments, so I'll share them here, hoping they can save other people some time.

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set;

const changeRangeInputValue = ($range) => (value) => {
  return new Promise((resolve) => {
    nativeInputValueSetter.call($range[0], value);
    $range[0].dispatchEvent(new Event("input", { value, bubbles: true }));
    $range[0].dispatchEvent(new Event("change", { value, bubbles: true }));
    resolve();
  });
};

What changed:

I needed to dispatch both input and change events. Our slider implementation uses both, maybe that's the case for you as well.
I needed to check the contents of another element right after changing the value of the slider. So, I have to wrap changeRangeInputValue's body within a promise, otherwise Cypress will happily move on to the next command in queue, and check the contents of slider-dependent elements before they actually change (see the docs for cy.then for more info on this).

Hopefully I didn't misunderstand any Cypress or DOM details - but the above solution, adapted from @beausmith 's, worked well for me, letting me test sliders on my project.

rub · 2020-09-30T13:33:46Z

Thanks @eFFeeMMe, that works great!

afraser · 2020-12-03T14:25:42Z

Here's a variation on @ryanfiller 's solution that is implemented as a child command for a more succinct API (I think):

Usage

cy.get('.slider-input').controlledInputChange('5000000')

Command

Cypress.Commands.add('controlledInputChange', { prevSubject: 'element'}, (input, value) => {
  const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value'
  ).set
  const changeInputValue = inputToChange => newValue => {
    nativeInputValueSetter.call(inputToChange[0], newValue)
    inputToChange[0].dispatchEvent(new Event('change', { newValue, bubbles: true }))
  }
  return cy.get(input).then(input => changeInputValue(input)(value))
})

alexp1980 · 2020-12-10T15:54:30Z

@afraser I've tried your method for a React field but doesn't work for me. I'm filling in a bunch of fields (which does work) but there's a button that activates when they are all filled it which isn't happening. I've been told this button works off the 'onChange 'event of the fields so it should work right?

Thanks

afraser · 2020-12-10T17:05:03Z

@alexp1980 hrm... not sure what to tell you. I'm still pretty new to cypress myself and this is working for me when it comes to setting a slider input value. My other controlled inputs however don't even need it. I just use cy.get('input').type('asdf').

Maybe try adding logging to your component to verify that your values are/aren't being set. If they are, then something else is going on with your button.

JonathanAbdon · 2021-03-15T13:09:14Z

has anyone found the typescript version of this workaround?
@cjoecker did you end up solving the illegal invocation error??

cjoecker · 2021-03-21T19:36:36Z

@JonathanAbdon I couldn't solve it until now :(

dil-sjammugani · 2021-04-27T15:36:00Z

@davemyersworld saviour you are!! Many thanks and very much appreciated for the below:
I have been struggling to get my slider working from the last 3 days.
Your code worked like a miracle 👍

// 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 }));
    });
  });
});

harrislee09 · 2021-07-29T05:26:03Z

Has anyone managed to program the workaround with Typescript?

I'm getting always a Type Error - Illegal invocation for this:

const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
)?.set

const changeRangeInputValue = ($range: JQuery<HTMLElement>) => (value: number) => {
  nativeInputValueSetter?.call($range[0], value)

  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}

@cjoecker, @JonathanAbdon this works with typescript -> #1570 (comment)

RobertoPegoraro · 2021-08-02T18:36:30Z

Has anyone managed to program the workaround with Typescript?
I'm getting always a Type Error - Illegal invocation for this:
const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  'value'
)?.set

const changeRangeInputValue = ($range: JQuery<HTMLElement>) => (value: number) => {
  nativeInputValueSetter?.call($range[0], value)

  $range[0].dispatchEvent(new Event('change', { value, bubbles: true }))
}
@cjoecker, @JonathanAbdon this works with typescript -> #1570 (comment)

It doesn't work for TypeScript. I received the error:
Argument of type '{ value: number; bubbles: true; }' is not assignable to parameter of type 'EventInit'. Object literal may only specify known properties, and 'value' does not exist in type 'EventInit'

So I've solved my problem with this issue for TypeScript using the following code:
In commands:

Cypress.Commands.add('setSliderValue', { prevSubject: 'element' },
    (subject, value) => {
        const element = subject[0]

        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
            window.HTMLInputElement.prototype,
            'value'
        )?.set
        
        nativeInputValueSetter?.call(element, value)
        element.dispatchEvent(new Event('input', { bubbles: true }))
    }
)

declare namespace Cypress {
    interface Chainable {
        setSliderValue(value: number): Chainable<void>
    }
}

And use it in the test:

cy.get('input[name="sliderComponentInput"]').setSliderValue(25)

Marincor · 2021-09-23T15:26:59Z

@RobertoPegoraro, this worked for me, thanks!

fuadbinzia · 2022-02-08T20:58:39Z

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

There are two parts:

Set the value of the underlying DOM node (avoiding React's override)

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.

@davemyersworld Can't thank you enough for this solution!!

artalar · 2022-04-06T12:44:04Z

.type("0{backspace}") as an alternative solution

jumaantony · 2024-11-03T14:40:52Z

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

There are two parts:

Set the value of the underlying DOM node (avoiding React's override)

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.

This one really helped me navigate around this. My app is built using nextjs and whenever Id use cypress triggers to slide the range, it wouls reset back to zero. Thank you for this

alexkirillovtech · 2024-11-05T15:51:01Z

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.

@sbasinger Thank you from 2024

jennifer-shehane added type: bug pkg/driver This is due to an issue in the packages/driver directory stage: needs investigating Someone from Cypress needs to look at this labels Apr 11, 2018

jennifer-shehane added stage: ready for work The issue is reproducible and in scope difficulty: 2️⃣ and removed stage: needs investigating Someone from Cypress needs to look at this labels Jan 14, 2019

jennifer-shehane mentioned this issue Apr 4, 2019

.trigger(mousemove) doesn't work with slider #3884

Closed

mantanquzzmo mentioned this issue Feb 8, 2020

User can add restaurants CraftAcademy/tripwiz_client#10

Merged

jxjj mentioned this issue Nov 8, 2021

Fix failing slider test UMN-LATIS/ChimeIn2.0#84

Merged

cypress-bot bot added stage: icebox and removed stage: ready for work The issue is reproducible and in scope labels Apr 28, 2022

nagash77 added the prevent-stale mark an issue so it is ignored by stale[bot] label Apr 3, 2023

jennifer-shehane removed the difficulty: 2️⃣ label Oct 4, 2023

jennifer-shehane removed the stage: icebox label Nov 21, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

rluncasu commented Apr 11, 2018 •

edited by jennifer-shehane

Loading

jennifer-shehane commented Apr 11, 2018

rluncasu commented Apr 12, 2018 •

edited by jennifer-shehane

Loading

excitement-engineer commented Apr 16, 2018

annezhou920 commented Dec 13, 2018 •

edited by jennifer-shehane

Loading

sbasinger commented Dec 21, 2018 •

edited by jennifer-shehane

Loading

davemyersworld commented Jan 2, 2019 •

edited by jennifer-shehane

Loading

annezhou920 commented Jan 3, 2019

Elshaikh commented Mar 10, 2019 •

edited by jennifer-shehane

Loading

beausmith commented Mar 27, 2019 •

edited

Loading

moshie commented Jan 23, 2020 •

edited by jennifer-shehane

Loading

aquacalc commented Mar 8, 2020 •

edited

Loading

ryanfiller commented Mar 26, 2020 •

edited by jennifer-shehane

Loading

Totti10as commented Mar 31, 2020 •

edited by jennifer-shehane

Loading

Totti10as commented Mar 31, 2020 •

edited by jennifer-shehane

Loading

Perhaps someone can help?

cjoecker commented Apr 27, 2020 •

edited by jennifer-shehane

Loading

YuanGaoo commented May 26, 2020 •

edited

Loading

YuanGaoo commented May 26, 2020

neilsud commented Jul 17, 2020 •

edited by jennifer-shehane

Loading

eFFeeMMe commented Sep 30, 2020 •

edited

Loading

rub commented Sep 30, 2020 •

edited

Loading

afraser commented Dec 3, 2020 •

edited

Loading

alexp1980 commented Dec 10, 2020

afraser commented Dec 10, 2020

JonathanAbdon commented Mar 15, 2021

cjoecker commented Mar 21, 2021

dil-sjammugani commented Apr 27, 2021 •

edited

Loading

harrislee09 commented Jul 29, 2021

RobertoPegoraro commented Aug 2, 2021 •

edited

Loading

Marincor commented Sep 23, 2021

fuadbinzia commented Feb 8, 2022

artalar commented Apr 6, 2022 •

edited

Loading

jumaantony commented Nov 3, 2024

alexkirillovtech commented Nov 5, 2024

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

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

Comments

rluncasu commented Apr 11, 2018 • edited by jennifer-shehane Loading

Current behavior:

Desired behavior:

Steps to reproduce:

Versions

jennifer-shehane commented Apr 11, 2018

rluncasu commented Apr 12, 2018 • edited by jennifer-shehane Loading

excitement-engineer commented Apr 16, 2018

annezhou920 commented Dec 13, 2018 • edited by jennifer-shehane Loading

sbasinger commented Dec 21, 2018 • edited by jennifer-shehane Loading

davemyersworld commented Jan 2, 2019 • edited by jennifer-shehane Loading

annezhou920 commented Jan 3, 2019

Elshaikh commented Mar 10, 2019 • edited by jennifer-shehane Loading

beausmith commented Mar 27, 2019 • edited Loading

HTML

Cypress

Workaround 🎉

moshie commented Jan 23, 2020 • edited by jennifer-shehane Loading

aquacalc commented Mar 8, 2020 • edited Loading

ryanfiller commented Mar 26, 2020 • edited by jennifer-shehane Loading

Totti10as commented Mar 31, 2020 • edited by jennifer-shehane Loading

Perhaps someone can help?

Totti10as commented Mar 31, 2020 • edited by jennifer-shehane Loading

Perhaps someone can help?

cjoecker commented Apr 27, 2020 • edited by jennifer-shehane Loading

YuanGaoo commented May 26, 2020 • edited Loading

YuanGaoo commented May 26, 2020

neilsud commented Jul 17, 2020 • edited by jennifer-shehane Loading

eFFeeMMe commented Sep 30, 2020 • edited Loading

rub commented Sep 30, 2020 • edited Loading

afraser commented Dec 3, 2020 • edited Loading

alexp1980 commented Dec 10, 2020

afraser commented Dec 10, 2020

JonathanAbdon commented Mar 15, 2021

cjoecker commented Mar 21, 2021

dil-sjammugani commented Apr 27, 2021 • edited Loading

harrislee09 commented Jul 29, 2021

RobertoPegoraro commented Aug 2, 2021 • edited Loading

Marincor commented Sep 23, 2021

fuadbinzia commented Feb 8, 2022

artalar commented Apr 6, 2022 • edited Loading

jumaantony commented Nov 3, 2024

alexkirillovtech commented Nov 5, 2024

rluncasu commented Apr 11, 2018 •

edited by jennifer-shehane

Loading

rluncasu commented Apr 12, 2018 •

edited by jennifer-shehane

Loading

annezhou920 commented Dec 13, 2018 •

edited by jennifer-shehane

Loading

sbasinger commented Dec 21, 2018 •

edited by jennifer-shehane

Loading

davemyersworld commented Jan 2, 2019 •

edited by jennifer-shehane

Loading

Elshaikh commented Mar 10, 2019 •

edited by jennifer-shehane

Loading

beausmith commented Mar 27, 2019 •

edited

Loading

moshie commented Jan 23, 2020 •

edited by jennifer-shehane

Loading

aquacalc commented Mar 8, 2020 •

edited

Loading

ryanfiller commented Mar 26, 2020 •

edited by jennifer-shehane

Loading

Totti10as commented Mar 31, 2020 •

edited by jennifer-shehane

Loading

Totti10as commented Mar 31, 2020 •

edited by jennifer-shehane

Loading

cjoecker commented Apr 27, 2020 •

edited by jennifer-shehane

Loading

YuanGaoo commented May 26, 2020 •

edited

Loading

neilsud commented Jul 17, 2020 •

edited by jennifer-shehane

Loading

eFFeeMMe commented Sep 30, 2020 •

edited

Loading

rub commented Sep 30, 2020 •

edited

Loading

afraser commented Dec 3, 2020 •

edited

Loading

dil-sjammugani commented Apr 27, 2021 •

edited

Loading

RobertoPegoraro commented Aug 2, 2021 •

edited

Loading

artalar commented Apr 6, 2022 •

edited

Loading