developergovindgupta / multi-range-slider-react-ts

single component to select range value from slider with no other dependency.
14 stars 9 forks source link

onChange event infinite loop #1

Closed info3node closed 9 months ago

info3node commented 1 year ago

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

developergovindgupta commented 1 year ago

looking for the issue, thanks

On Thu, 6 Oct 2022 at 13:30, info3node @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/developergovindgupta/multi-range-slider-react-ts/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMXYHBEVMEJSATEKMZGDQGLWB2BLXANCNFSM6AAAAAAQ6KQWJY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

-- Sr. Javascript Developer Govind Prasad Gupta For Designhill (a platform owned by Reliable E Solutions Pvt Ltd) p: 7841849768, 9335057042 a: Designhill , B 106 , Sector 29, Near Signature Tower , Gurgaon Haryana 122001 w: www.designhill.com e: @. @.> Featured in: [image: http://www.huffingtonpost.com/casey-cavanagh/crowdsourcing-platforms-a_b_8314266.html?ir=India&adsSiteOverride=in]

http://thenextweb.com/insider/2016/01/08/7-must-know-content-marketing-trends-of-2016/

http://www.forbes.com/sites/amyguttman/2015/10/11/startups-why-giving-stuff-away-for-free-is-the-best-marketing-tool/

developergovindgupta commented 1 year ago

Please update latest version - infinite loop is fixed see example code

https://codesandbox.io/s/range-slider-with-custom-css-bunj91

if you face it now then please send me example code.

On Sun, 9 Oct 2022 at 21:01, Govind Prasad Gupta < @.***> wrote:

looking for the issue, thanks

On Thu, 6 Oct 2022 at 13:30, info3node @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/developergovindgupta/multi-range-slider-react-ts/issues/1, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMXYHBEVMEJSATEKMZGDQGLWB2BLXANCNFSM6AAAAAAQ6KQWJY . You are receiving this because you are subscribed to this thread.Message ID: @.*** com>

-- Sr. Javascript Developer Govind Prasad Gupta For Designhill (a platform owned by Reliable E Solutions Pvt Ltd) p: 7841849768, 9335057042 a: Designhill , B 106 , Sector 29, Near Signature Tower , Gurgaon Haryana 122001 w: www.designhill.com e: @. @.> Featured in: [image: http://www.huffingtonpost.com/casey-cavanagh/crowdsourcing-platforms-a_b_8314266.html?ir=India&adsSiteOverride=in]

http://thenextweb.com/insider/2016/01/08/7-must-know-content-marketing-trends-of-2016/

http://www.forbes.com/sites/amyguttman/2015/10/11/startups-why-giving-stuff-away-for-free-is-the-best-marketing-tool/

-- Sr. Javascript Developer Govind Prasad Gupta For Designhill (a platform owned by Reliable E Solutions Pvt Ltd) p: 7841849768, 9335057042 a: Designhill , B 106 , Sector 29, Near Signature Tower , Gurgaon Haryana 122001 w: www.designhill.com e: @. @.> Featured in: [image: http://www.huffingtonpost.com/casey-cavanagh/crowdsourcing-platforms-a_b_8314266.html?ir=India&adsSiteOverride=in]

http://thenextweb.com/insider/2016/01/08/7-must-know-content-marketing-trends-of-2016/

http://www.forbes.com/sites/amyguttman/2015/10/11/startups-why-giving-stuff-away-for-free-is-the-best-marketing-tool/

netin1202 commented 1 year ago

I still have this issue

jamesraj001 commented 1 year ago

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

developergovindgupta commented 1 year ago

Ok, I will check.

On Thu 30 Mar, 2023, 12:08 PM jamesraj001, @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/developergovindgupta/multi-range-slider-react-ts/issues/1#issuecomment-1489774278, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMXYHBD7VAVIVLYQSGN4VV3W6UTAFANCNFSM6AAAAAAQ6KQWJY . You are receiving this because you commented.Message ID: <developergovindgupta/multi-range-slider-react-ts/issues/1/1489774278@ github.com>

developergovindgupta commented 1 year ago

Please give me demo code when you face infinite loop onChange event

i can not reproduce in my code -- https://codesandbox.io/s/demo-hf21x2?file=/src/App.tsx

On Thu, 30 Mar 2023 at 14:03, Govind Prasad Gupta < @.***> wrote:

Ok, I will check.

On Thu 30 Mar, 2023, 12:08 PM jamesraj001, @.***> wrote:

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

— Reply to this email directly, view it on GitHub https://github.com/developergovindgupta/multi-range-slider-react-ts/issues/1#issuecomment-1489774278, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMXYHBD7VAVIVLYQSGN4VV3W6UTAFANCNFSM6AAAAAAQ6KQWJY . You are receiving this because you commented.Message ID: <developergovindgupta/multi-range-slider-react-ts/issues/1/1489774278@ github.com>

-- Sr. Javascript Developer Govind Prasad Gupta For Designhill (a platform owned by Reliable E Solutions Pvt Ltd) p: 7841849768, 9335057042 a: Designhill , B 106 , Sector 29, Near Signature Tower , Gurgaon Haryana 122001 w: www.designhill.com e: @. @.> Featured in: [image: http://www.huffingtonpost.com/casey-cavanagh/crowdsourcing-platforms-a_b_8314266.html?ir=India&adsSiteOverride=in]

http://thenextweb.com/insider/2016/01/08/7-must-know-content-marketing-trends-of-2016/

http://www.forbes.com/sites/amyguttman/2015/10/11/startups-why-giving-stuff-away-for-free-is-the-best-marketing-tool/

developergovindgupta commented 1 year ago

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 1 year ago

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 1 year ago

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.