Why does my numerical input box still display letters or symbols only when typed for the first time? (Reactjs)


I have actually made two input boxes (cash amount range e.g, From $100 – To $200) to only type numbers with a single period, comma(s) and fixed to 2 decimal places but when I type alphabets or symbols, they are visible but only on the first try. See GIF below:

See GIF

At first, the input boxes can be filled with all characters or symbols but when I click the next input box or somewhere, the input is gone (because they aren’t numbers). What I am trying to achieve here is to prevent the input boxes to be filled with letters or other symbols and to strictly be filled with numbers ONLY. What have I done wrong here?

<InputBox
    className="input_midsmall"
    id={self.state.fields.remittAmtFr.fieldCd}
    placeholder="From"
    onChange={onChangeField}
    value={self.state.formData.remittAmtFr}
    inputType="text"
    onBlur={onBlurAmount}
    onFocus={onFocusAmount}
/> 

render() {
        function isAmount(value: string) {
            // default limit to 12
            return /^d{0,13}(.d{0,2})?$/.test(value)
        }
        const self = this
        const { intl } = this.props
        const onChangeField = function (this: any, event: any, desc: string) {
            const vm = this || event.target
            const fieldCd = vm ? vm.id : desc 
            let value = !_.isUndefined(event.target)? event.target.value : event
            const setState = (prevState: any) => {
                const formData = prevState.formData
                switch (fieldCd) {
                    case self.state.fields.remittAmtFr.fieldCd:
                    case self.state.fields.remittAmtTo.fieldCd:
                        value = isAmount(value) ? value : formData[fieldCd]
                        break
                }

                formData[fieldCd] = value

                if(_.isEqual(self.state.fields.dateTo.fieldCd, fieldCd) && _.isNull(value)){
                    FormValidation.clearErrors(prevState.fields, self.state.fields.dateFr.fieldCd)
                }

                if(_.isEqual(self.state.fields.dateFr.fieldCd, fieldCd) && _.isNull(value)){
                    FormValidation.clearErrors(prevState.fields, self.state.fields.dateTo.fieldCd)
                }

                const fields = FormValidation.clearErrors(prevState.fields, fieldCd)

                return {
                    formData,
                    fields,
                }
            }
            self.setState(setState)
            self.props.onClearAll()
            self.setupFieldAttr()
        }
const onBlurAmount = function (this: any, value: any) {
            const fieldCd = value.currentTarget.id
            let inputValue = value.currentTarget.value
            if (isNaN(inputValue) || inputValue === '') {
                inputValue = ''
            } else {
                inputValue = isAmount(inputValue)
                    ? formatAmount(inputValue)
                    : inputValue
            }
            const setState = (prevState: any) => {
                const formData = prevState.formData
                formData[fieldCd] = inputValue
                const fields = FormValidation.clearErrors(prevState.fields, fieldCd)
                return {
                    formData,
                    fields,
                }
            }
            self.setState(setState)
        }
const onFocusAmount = (value: any) => {
            const fieldCd = value.currentTarget.id
            let inputValue = value.currentTarget.value
            inputValue = formatAmountWithoutComma(inputValue)
            onChangeField(inputValue, fieldCd)
        }

Source: React – Stack Overflow

August 17, 2021
Category : News
Tags: input | inputbox | reactjs | typescript | user-input

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.