auto focus false not working

[Deboracgs]

Auto focus false not working, when i click in other input, scrolling automaticaly to currencyInput, any solution ?

https://media.giphy.com/media/1mssFMXlG3mORJt03j/giphy.gif

import React, { Component } from 'react';
import CurrencyInput from 'react-currency-input';
class InputMoneyComponent extends Component {

    constructor(props){
        super(props);

        this.input;
    }

    handleChange(event){
        event.preventDefault();
        let value = event.target.value;
        this.props.onChange(value);
    };


    render() {
        const { classes } = this.props;
        return (
            <CurrencyInput 
                className={"form-control"}
                value={this.props.value}
                disabled={this.props.disabled}
                onChangeEvent={this.handleChange.bind(this)}
                thousandSeparator={"."}
                decimalSeparator={","}
                allowNegative={false}
                ref={ref => this.input = ref }
                inputType={"text"}
                autoFocus={false}
            />
        );
    }
}
export default (InputMoneyComponent);

[peterblunden-egrowcery]

I'm seeing this issue too on safari iOS 12 (ipad). Seems to be something to do with componentDidMount and componentDidUpdate because if i override those methods then the problem goes away. Could it be this line causing the input to receive focus?

node.setSelectionRange(selectionStart, selectionEnd);

[0xicingdeath]

I am running into the same issue with using this component on Safari. However, overriding componentDidMount and componentDidUpdate didn't work for me. Still experiencing the same problem with the focus.

[peterblunden-egrowcery]

Here's my override code that got it to work

// Fix autofocus issues with CurrencyInput
// on iOS it will still auto focus even if autoFocus=false
// see https://github.com/jsillitoe/react-currency-input/issues/90
let componentDidMount_super = CurrencyInput.prototype.componentDidMount;
CurrencyInput.prototype.componentDidMount = function() {
    if(!this.props.autoFocus) {
        let setSelectionRange_super = this.theInput.setSelectionRange;
        this.theInput.setSelectionRange = () => {};
        componentDidMount_super.call(this, ...arguments);
        this.theInput.setSelectionRange = setSelectionRange_super;
    }
    else {
        componentDidMount_super.call(this, ...arguments);
    }
};
let componentDidUpdate_super = CurrencyInput.prototype.componentDidUpdate;
CurrencyInput.prototype.componentDidUpdate = function() {
    if(!this.props.autoFocus) {
        let setSelectionRange_super = this.theInput.setSelectionRange;
        this.theInput.setSelectionRange = () => {};
        componentDidUpdate_super.call(this, ...arguments);
        this.theInput.setSelectionRange = setSelectionRange_super;
    }
    else {
        componentDidMount_super.call(this, ...arguments);
    }
};

[efibe]

Here's my override code that got it to work

This broke the backspace key when there is a suffix enabled.

[efibe]

This is fixed in #74 but still not published to npm

I made this small hack to get it working right now:

let componentDidMount_super = CurrencyInput.prototype.componentDidMount; CurrencyInput.prototype.componentDidMount = function() { this.theInput.setSelectionRange_super = this.theInput.setSelectionRange; this.theInput.setSelectionRange = (start, end) => { if (document.activeElement === this.theInput) { this.theInput.setSelectionRange_super(start, end); } }; componentDidMount_super.call(this, ...arguments); };

edit: I couldn't format this comment to save my life.

[WesJourdan]

This drove me mad. How is this still not published to npm?