developergovindgupta/multi-range-slider-react-ts

onChange event infinite loop

Closed this issue · 9 comments

info3node commented

When I am using this component I geting into infinite loop of onChange event

developergovindgupta commented
developergovindgupta commented
netin1202 commented

I still have this issue

jamesraj001 commented

I am also facing the same issue, infinite loop of onChange event

developergovindgupta commented
  • 👍1
developergovindgupta commented
developergovindgupta commented

When I am using this component I geting into infinite loop of onChange event

please provide demo code
I can not reproduce
https://codesandbox.io/s/demo-hf21x2?file=/src/App.tsx

jamesraj001 commented

Hi Govind Prasad Gupta, Thanks for your response.

I just tried to copy paste your sandbox code in my project, Its working. Thanks

I can able to reproduce in my local project, but I am not able to reproduce that issue in your sandbox.

I'm not sure if it's because of the various packages I use in my project.

For your reference, this is my package.json file

{
"name": "@coreui/coreui-free-react-admin-template",
"version": "2.6.0",
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"author": "Łukasz Holeczek",
"homepage": "https://coreui.io",
"copyright": "Copyright 2017-2019 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"repository": {
"type": "git",
"url": "git+ssh://git@github.com/coreui/coreui-free-react-admin-template.git"
},
"dependencies": {
"@coreui/coreui": "^2.1.12",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
"@coreui/icons": "0.3.0",
"@coreui/react": "^2.5.1",
"@googlemaps/markerclusterer": "^1.0.15",
"@khanacademy/react-multi-select": "^0.3.3",
"antd": "^4.14.0",
"bootstrap": "^4.3.1",
"chart.js": "^2.9.4",
"classnames": "^2.2.6",
"core-js": "^3.1.4",
"countries-and-timezones": "^3.3.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"firebase": "^7.23.0",
"flag-icon-css": "^3.3.0",
"font-awesome": "^4.7.0",
"multi-range-slider-react": "^2.0.2",
"node-sass": "^4.14.1",
"prop-types": "^15.7.2",
"qrcode.react": "^1.0.0",
"react": "^16.8.6",
"react-app-polyfill": "^1.0.1",
"react-chartjs-2": "^2.7.6",
"react-checkbox-tree": "^1.6.0",
"react-datepicker": "^2.14.1",
"react-dom": "^16.8.6",
"react-excel-workbook": "0.0.4",
"react-firebaseui": "^4.1.0",
"react-google-charts": "^3.0.15",
"react-google-maps": "^9.4.5",
"react-html5-camera-photo": "^1.5.4",
"react-idle-timer": "^4.6.4",
"react-liquid-gauge": "^1.2.4",
"react-multi-select-component": "^4.2.5",
"react-qr-scanner": "^1.0.0-alpha.8",
"react-razorpay": "^1.1.5",
"react-reactstrap-pagination": "^2.0.3",
"react-router-config": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-rte": "^0.16.5",
"react-s3": "^1.3.1",
"react-select": "^3.1.1",
"react-simple-tree-menu": "^1.1.18",
"react-test-renderer": "^16.8.6",
"react-with-firebase-auth": "^1.3.2",
"reactjs-popup": "^1.5.0",
"reactstrap": "^8.0.0",
"simple-line-icons": "^2.4.1",
"swagger-ui-react": "^3.35.1",
"xlsx": "^0.17.0"
},
"devDependencies": {
"react-scripts": "^4.0.3"
},
"scripts": {
"start": "react-scripts start",
"build": "GENERATE_SOURCEMAP=false react-scripts build",
"test": "react-scripts test",
"test:cov": "npm test -- --coverage --watchAll=false",
"test:debug": "react-scripts --inspect-brk test --runInBand",
"eject": "react-scripts eject"
},
"bugs": {
"url": "https://github.com/coreui/coreui-free-react-admin-template/issues"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 9",
"not op_mini all"
],
"jest": {
"collectCoverageFrom": [
"src//*.{js,jsx}",
"!/*index.js",
"!src/serviceWorker.js",
"!src/polyfill.js"
]
},
"engines": {
"node": ">=8.10",
"npm": ">=6"
},
"main": "index.js"
}

developergovindgupta commented

Updated (multi-range-slider-react Version 2.0.3): fixed the recursive "onChange" event trigger and added id props to set id attribute to multi-range-slider root div.