0

The issue I'm struggling with is that whenever I click on the budget-glyph-clear I still want to be able to be focused (which I am) to the input field and type in it. I get to see the input className correspond to the formControlDisplayStyle style when the input should be focused, but I don't see the caret on the input to type (which I am not able to)

Here's my FormControl

            <InputGroup className={formControlDisplayStyle}>
                <FormControl 
                    className='budget-input-field'
                    pattern='[0-9]*'
                    type='text'
                    placeholder={this.props.placeholder}
                    onChange={this.onInputChange}
                    value={this.props.value}
                    onFocus={this.onFocus}
                    onBlur={this.onBlur}
                    autoFocus={this.props.focused}
                />

                <InputGroup.Addon className='clear-sign budget-addon' style={hideClearButton}>
                    <div className='budget-glyph budget-glyph-clear' onClick={this.onClearClick} />
                </InputGroup.Addon>

            </InputGroup>

Could someone shed some light as to why I'm not able to type or see the caret on the focused field?

1 Answer 1

1

Ok, after some struggle, I realized what was going on. I also tried adding ref as per many google search suggestions, but nothing.

The following code would actually leave the input focused bent to my will!

private input: HTMLInputElement;
public componentDidUpdate() {
    if (this.props.focused) {
        this.input.focus();
    }
}

The render method

<InputGroup className={formControlDisplayStyle}>
    <FormControl 
        className='budget-input-field'
        pattern='[0-9]*'
        type='text'
        placeholder={this.props.placeholder}
        onChange={this.onInputChange}
        value={this.props.value}
        onFocus={this.onFocus}
        onBlur={this.onBlur}
        inputRef={this.updateInputRef}
    />

    <InputGroup.Addon className='clear-sign budget-addon' style={hideClearButton}>
        <div className='budget-glyph budget-glyph-clear' onClick={this.onClearClick} />
    </InputGroup.Addon>

</InputGroup>

private method with magic

private updateInputRef = (ref: HTMLInputElement) => {
    this.input = ref;
} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.