Reactivesearch: Cursor jumps to end of input when inputValue is changed when using DataSearch

[Arvind6353]

Hi ,
I am using Datasearch Component .
Whenever I try to modify the search value (lets say change the middle character) , the cursor position is going to the end of the input . I guess its rerendering every time .

Pls suggest a fix .

I tried the demo sandbox example for datasearch and I face the same issue there .

<DataSearch componentId="searchbox" dataField={["title"]} fieldWeights={[3]} placeholder="Search" autosuggest={false} highlight={true} />

[divyanshu013]

Hi, I'm able to replicate the issue. We're using downshift in the search components and there is a related closed issue. Will be able to tell better after more investigation.

[Arvind6353]

@metagrover @siddharthlatest : Do you have any soln or workaround for this issue ?

[metagrover]

Sorry, didn't get any time to dive into this 😅

This issue should help - https://github.com/paypal/downshift/issues/217. Open to PRs if you can propose a solution to this 🐱

[Arvind6353]

@metagrover @divyanshu013 : I used ReactiveComponent and created a custom input and it solved this issue . But the Reactive component provides only an option to add the query . I am not able to find an option to highlight the fields. Can you pls let me know if there is an option for highlighting the results , similar to using setQuery in reactive component.

[Arvind6353]

I solved this cursor issue by making some changes in Datasearch component file . I removed some state changes on the field (isOpen) and as I was not using suggestions here , I commented some of the state changes pertaining to it and it worked.

[aeronesto]

@Arvind6353 Can you please share your code changes?

[Arvind6353]

@aeronesto : Just comment out the state changes on isOpen field . And if you are not using suggestions , remove the state change on suggestions field as well .

[aeronesto]

@Arvind6353 : I tried to do what you said, with combinations of autosuggest & this.state.isOpen set to true/false, but it didn't solve the cursor issue.

I am using @appbaseio/[email protected]

[aeronesto]

I solved the cursor issue in DataSearch.js & CategorySearch.js by rotating the order of setState({ currentValue: value }) & setState({ suggestions: [] }). By placing the currentValue state change first, and the suggestions state change defined in the callback, this.setValue(), the cursor does not jump to the end.

From DataSearch.js:

currentValue state change replaces suggestions state change in this.onInputChange:

this.onInputChange = function (e) {
    var value = e.target.value;

    if (!_this4.state.isOpen) {
        _this4.setState({
            isOpen: true
        });
    }
    if (value.trim() !== _this4.state.currentValue.trim()) {
        _this4.setState({
            currentValue: value
        }, function () {
            _this4.setValue(value);
        });
    } else {
        _this4.setValue(value);
    }
};

suggestions state change replaces currentValue state change in this.setValue:

this.setValue = function (value) {
    var isDefaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
    var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _this4.props;
    var category = arguments[3];

    // ignore state updates when component is locked
    if (props.beforeValueChange && _this4.locked) {
        return;
    }

    _this4.locked = true;
    var performUpdate = function performUpdate() {
        _this4.setState({
            suggestions: []
        }, function () {
            if (isDefaultValue) {
                if (_this4.props.autosuggest) {
                    _this4.setState({
                        isOpen: false
                    });
                    _this4.updateQuery(_this4.internalComponent, value, props);
                }
                _this4.updateQuery(props.componentId, value, props, category);
            } else {
                // debounce for handling text while typing
                _this4.handleTextChange(value);
            }
            _this4.locked = false;
            if (props.onValueChange) props.onValueChange(value);
        });
    };
    (0, _helper.checkValueChange)(props.componentId, value, props.beforeValueChange, performUpdate);
};

[divyanshu013]

@aeronesto, would you like to send a PR for this?

[aeronesto]

@divyanshu013, sure thing.

[rohit-sourcefuse]

@aeronesto, I am still facing this issue is it resolved?
Packages versions :
"@appbaseio/reactivesearch": "^2.8.1"
"react": "16.4.1"

[divyanshu013]

Hi @rohit-sourcefuse, it isn't resolved yet.

[rohit-sourcefuse]

@divyanshu013, Thanks for your reply any suggestion on this?
How to fix this issue at our end without messing with reactive search code?

[divyanshu013]

At the moment you can use ReactiveComponent to create a custom component. Haven't gotten the time to dive into the issue yet in the DataSearch component but PRs are welcome. There has been some discussion about the issue in the comments above if you want to take a shot :)

[aeronesto]

@rohit-sourcefuse I just submitted the PR to fix this.

[divyanshu013]

Available now in v2.8.2