NumericTextBox Scroll Wheel changes numeric value

[Jimmy]

I am trying to stop the NumericTextBox  Scroll Wheel from changing the value in the Text Box.  

[Stefan]

Hello,

That can be done by stoping the wheel event propagation using the component ref:

https://stackblitz.com/edit/react-3zbode-ax72nd?file=app/main.tsx

Regards,
Stefan
Progress Telerik

[Jimmy]

I am fairly new to React.  We have created a component for the input.  Can you see how to make this happen using this code?

 

import React from "react"

import { connect } from "react-redux";

import { RouteComponentProps } from "react-router"

import { Label } from "reactstrap";

import { Col, Row } from "reactstrap";

import { ApplicationState } from "../../../../store";

import { DatePicker } from "@progress/kendo-react-dateinputs";

import * as CashModuleStore from '../../../../model/application/CashModuleStore';

import * as CDUBalanceStore from '../../../../model/aggregates/cdu/CDUBalanceStore';

import { CashModule } from "../../../../model";

import CDUBalanceUploadPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadPAS";

import CDUBalanceUploadExcelPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadExcel";

import CDU from '../../../../model/aggregates/cdu/CDU';

import { NumericTextBox } from "@progress/kendo-react-inputs";

type state = {

}

type OwnProps = {

    description: string;

    amount: number;

    date?: Date | null;

    amountName: string;

    dateName?: string;

    showDate?: boolean;

}

type CDUBalanceInputProps =

    CashModuleStore.CashModuleState &

    CDUBalanceStore.CDUBalanceState &

    typeof CashModule.CashModuleActions &

    typeof CDUBalanceUploadPAS.CDUBalanceUploadPASActions &

    typeof CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions &

    typeof CDU.CDUActions &

    OwnProps &

    RouteComponentProps<{}>

class CDUBalanceInput extends React.Component<CDUBalanceInputProps, state>{

    processUpdate(name: string, value: any) {

        this.props.cduBalanceUploadIsModified(); //Flag the CDU as modified.

        this.props.updateCDUBalanceUploadInput(name, value); //Update the store.

    }

    handleFocus = (e) => {

        e.target.element.select()

    }

    public render(): React.ReactNode {

        return <React.Fragment>

            <Col sm={{ size: 12 }}>

                <Row style={{ marginTop: '5px' }}>

                    <Col sm={{ size: 3 }}>

                        <Row style={{ display: 'inline-block' }}>

                            <Label style={{ display: 'inline-block', textAlign: 'right' }}>{this.props.description}</Label>

                        </Row>

                    </Col>

                    <Col sm={{ size: 4 }}>

                        <NumericTextBox

                            format='c2'

                            spinners={false}

                            value={this.props.amount ?? 0}

                            name={this.props.amountName}

                            onChange={(e) => this.processUpdate(e.target.name, e.target.value)}

                            disabled={this.props.isCDUBalanceUploadLoading}

                            onFocus={this.handleFocus}

                        />

                    </Col>

                    {this.props.showDate && <Col sm={{ size: 3 }} style={{ marginLeft: '6px' }}>

                        <DatePicker

                            name={this.props.dateName}

                            value={this.props.date}

                            format="dd/MMM/yyyy"

                            defaultShow={false}

                            onChange={(e) => this.processUpdate(e.target.name, e.target.value)}

                            disabled={this.props.isCDUBalanceUploadLoading} />

                    </Col>}

                </Row>

            </Col>

        </React.Fragment>

    }

}

export default connect((state: ApplicationState, ownProps: OwnProps) => ({ ...state.cashModule, ...state.cduBalancePAS, ...ownProps }), {

    ...CashModule.CashModuleActions, ...CDUBalanceUploadPAS.CDUBalanceUploadPASActions, ...CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions, ...CDU.CDUActions

})(CDUBalanceInput as any)

[Stefan]

Hello,

There are two main points:

1) Create e ref to the component:

https://reactjs.org/docs/refs-and-the-dom.html

2) When the component mounts, add the event listener:

https://reactjs.org/docs/react-component.html#componentdidmount

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

3) Remove the event listener when the component un-mounts:

https://reactjs.org/docs/react-component.html#componentwillunmount

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

There are the steps when using a class component. Based on the code I see that you are using a class component.

[Jimmy]

I tried to add it this way:

import React from "react"

import { connect } from "react-redux";

import { RouteComponentProps } from "react-router"

import { Label } from "reactstrap";

import { Col, Row } from "reactstrap";

import { ApplicationState } from "../../../../store";

import { DatePicker } from "@progress/kendo-react-dateinputs";

import * as CashModuleStore from '../../../../model/application/CashModuleStore';

import * as CDUBalanceStore from '../../../../model/aggregates/cdu/CDUBalanceStore';

import { CashModule } from "../../../../model";

import CDUBalanceUploadPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadPAS";

import CDUBalanceUploadExcelPAS from "../../../../model/aggregates/cdu/CDUBalanceUploadExcel";

import CDU from '../../../../model/aggregates/cdu/CDU';

import { NumericTextBox } from "@progress/kendo-react-inputs";

type state = {

}

type OwnProps = {

    description: string;

    amount: number;

    date?: Date | null;

    amountName: string;

    dateName?: string;

    showDate?: boolean;

}

type CDUBalanceInputProps =

    CashModuleStore.CashModuleState &

    CDUBalanceStore.CDUBalanceState &

    typeof CashModule.CashModuleActions &

    typeof CDUBalanceUploadPAS.CDUBalanceUploadPASActions &

    typeof CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions &

    typeof CDU.CDUActions &

    OwnProps &

    RouteComponentProps<{}>

const ref = React.useRef(null);

class CDUBalanceInput extends React.Component<CDUBalanceInputProps, state>{

    handleOnWheel = event => {

        event.stopPropagation();

    };

    componentDidMount(): void {

        ref.current.element.addEventListener('wheel', this.handleOnWheel);

    }

    processUpdate(name: string, value: any) {

        this.props.cduBalanceUploadIsModified(); //Flag the CDU as modified.

        this.props.updateCDUBalanceUploadInput(name, value); //Update the store.

    }

    handleFocus = (e) => {

        e.target.element.select()

    }

    public render(): React.ReactNode {

        return <React.Fragment>

            <Col sm={{ size: 12 }}>

                <Row style={{ marginTop: '5px' }}>

                    <Col sm={{ size: 3 }}>

                        <Row style={{ display: 'inline-block' }}>

                            <Label style={{ display: 'inline-block', textAlign: 'right' }}>{this.props.description}</Label>

                        </Row>

                    </Col>

                    <Col sm={{ size: 4 }}>

                        <NumericTextBox

                            format='c2'

                            spinners={false}

                            value={this.props.amount ?? 0}

                            name={this.props.amountName}

                            onChange={(e) => this.processUpdate(e.target.name, e.target.value)}

                            disabled={this.props.isCDUBalanceUploadLoading}

                            onFocus={this.handleFocus}

                        />

                    </Col>

                    {this.props.showDate && <Col sm={{ size: 3 }} style={{ marginLeft: '6px' }}>

                        <DatePicker

                            name={this.props.dateName}

                            value={this.props.date}

                            format="dd/MMM/yyyy"

                            defaultShow={false}

                            onChange={(e) => this.processUpdate(e.target.name, e.target.value)}

                            disabled={this.props.isCDUBalanceUploadLoading} />

                    </Col>}

                </Row>

            </Col>

        </React.Fragment>

    }

}

export default connect((state: ApplicationState, ownProps: OwnProps) => ({ ...state.cashModule, ...state.cduBalancePAS, ...ownProps }), {

    ...CashModule.CashModuleActions, ...CDUBalanceUploadPAS.CDUBalanceUploadPASActions, ...CDUBalanceUploadExcelPAS.CDUBalanceUploadExcelActions, ...CDU.CDUActions

})(CDUBalanceInputasany)

 

 

But I get this error:

[Stefan]

Hello,

The error occurs because of this line:

`const ref = React.useRef(null);`

The useRef method is a hook that is only available in functional components, not class components.

I made a class version of the same example to showcase the approach:

https://stackblitz.com/edit/react-3zbode-px8k2o?file=app/main.tsx

[Jimmy]

SO I tried to move this over to your version an still running into several errors :(

 

[Jimmy]

Here are the errors:

[Jimmy]

And this:

 

[Stefan]

Hello,

These are all TypeScript errors. They can be resolved by setting `this.ref` as type `any`.

[Jimmy]

That worked 100 percent.  Thank you for all the help...  You were awesome!!!!!