Search code examples
reactjsmaterial-uicursor-position

React and material UI: No cursor in input box, can't enter values

I use Material UI to have an input field that takes in a certain amount of value in $$. The problem I'm having is, the input box is always disabled. I can see the onClick working in the console, but there is no pointer, and the user can't enter any values.

               <Input
                  variants={{
                    name: 'dollar',
                    validationType: 'dollar',
                    label: 'Dollars',
                    placeholder: '$ 0.00',
                    switchAriaLabel: 'Switch to Amount',
                  }}
                  selected={{
                    name: 'dollar',
                    rawValue: '',
                    value: 0
                  }}
                  value={selectedCashAmount}
                  onChange={amount => setSelectedWithdrawalSplitCashAmount(amount)}
                  errorText={_.get(this.state.rolloverErrors, 'text')}
                  id="EnterInstallmentt"
/>

The box appears with $ 0.00 as placeholder but nothing happens when it's clicked. Any ideas on how to overcome this? Thanks!

Solution

  • What type of value would you like to get? Looks like you mixed up text input field and select field. The problem is rooted in using onClick and onChange functions simultaneously.

    However, you're looking for the Autocomplete input field which allows you to use both select lists and text input value.