Skip to content

Commit

Permalink
fix autocomplete bug
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasstjerne committed Aug 19, 2022
1 parent 6be5d1c commit e43e5dc
Show file tree
Hide file tree
Showing 6 changed files with 35 additions and 21 deletions.
12 changes: 8 additions & 4 deletions src/ColTree/NameAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ class NameSearchAutocomplete extends React.Component {
this.state = {
options: [],
value: "",
randomID: (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)
};
}

Expand Down Expand Up @@ -107,8 +108,8 @@ class NameSearchAutocomplete extends React.Component {
}
render = () => {
const { placeHolder, autoFocus, disabled } = this.props;
const { value , options} = this.state;
const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);
const { value , options, randomID} = this.state;
//const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);

// const options = this.getOptions(this.state.names, value)

Expand All @@ -129,8 +130,11 @@ class NameSearchAutocomplete extends React.Component {
value={value}
autoFocus={autoFocus === false ? false : true}
disabled={disabled}
getPopupContainer={() =>
document.getElementById(`taxon_autocomplete_${randomID}`)
getPopupContainer={() => {
console.log(`Test ${randomID}`)
return document.getElementById(`taxon_autocomplete_${randomID}`)
}

}

>
Expand Down
6 changes: 4 additions & 2 deletions src/Search/MultiValueFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ class MultiValueFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
selected: this.props.selected
selected: this.props.selected,
randomID: (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)
};
}

Expand All @@ -37,7 +38,8 @@ class MultiValueFilter extends React.Component {

render = () => {
const {defaultValue, label, vocab} = this.props;
const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);
const {randomID} = this.state;
//const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);
const vocabKeys = new Set([...vocab.map(i => i.value)]);
let val;
if(defaultValue && _.isArray(defaultValue)){
Expand Down
7 changes: 4 additions & 3 deletions src/components/DatasetAutocomplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ class DatasetAutocomplete extends React.Component {

this.state = {
datasets: [],
value: ''
value: '',
randomID: (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)
}
}

Expand Down Expand Up @@ -70,9 +71,9 @@ class DatasetAutocomplete extends React.Component {
this.setState({ value: "", names: [] }, this.props.onResetSearch);
}
render = () => {
const {value} = this.state;
const {value, randomID} = this.state;
const {style} = this.props
const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);
// const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);


const options = this.state.datasets ? this.state.datasets.map((o) => {
Expand Down
25 changes: 16 additions & 9 deletions umd/col-browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -85090,9 +85090,9 @@ var NameAutocomplete_NameSearchAutocomplete = function (_React$Component) {
disabled = _this$props2.disabled;
var _this$state = _this.state,
value = _this$state.value,
options = _this$state.options;

var randomID = (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1);
options = _this$state.options,
randomID = _this$state.randomID;
//const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);

// const options = this.getOptions(this.state.names, value)

Expand Down Expand Up @@ -85120,6 +85120,7 @@ var NameAutocomplete_NameSearchAutocomplete = function (_React$Component) {
autoFocus: autoFocus === false ? false : true,
disabled: disabled,
getPopupContainer: function getPopupContainer() {
console.log("Test " + randomID);
return document.getElementById("taxon_autocomplete_" + randomID);
}

Expand All @@ -85132,7 +85133,8 @@ var NameAutocomplete_NameSearchAutocomplete = function (_React$Component) {
_this.getNames = Object(lodash["debounce"])(_this.getNames, 500);
_this.state = {
options: [],
value: ""
value: "",
randomID: (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1)
};
return _this;
}
Expand Down Expand Up @@ -109422,8 +109424,9 @@ var MultiValueFilter_MultiValueFilter = function (_React$Component) {
defaultValue = _this$props.defaultValue,
label = _this$props.label,
vocab = _this$props.vocab;
var randomID = _this.state.randomID;
//const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);

var randomID = (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1);
var vocabKeys = new Set([].concat(vocab.map(function (i) {
return i.value;
})));
Expand Down Expand Up @@ -109476,7 +109479,8 @@ var MultiValueFilter_MultiValueFilter = function (_React$Component) {
};

_this.state = {
selected: _this.props.selected
selected: _this.props.selected,
randomID: (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1)
};
return _this;
}
Expand Down Expand Up @@ -109620,10 +109624,12 @@ var DatasetAutocomplete_DatasetAutocomplete = function (_React$Component) {
};

_this.render = function () {
var value = _this.state.value;
var _this$state = _this.state,
value = _this$state.value,
randomID = _this$state.randomID;
var style = _this.props.style;
// const randomID = (Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1)*(Math.floor(Math.random() * 100) +1);

var randomID = (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1);

var options = _this.state.datasets ? _this.state.datasets.map(function (o) {
var text = (o.alias || o.title) + ' [' + o.key + ']';
Expand Down Expand Up @@ -109671,7 +109677,8 @@ var DatasetAutocomplete_DatasetAutocomplete = function (_React$Component) {

_this.state = {
datasets: [],
value: ''
value: '',
randomID: (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1) * (Math.floor(Math.random() * 100) + 1)
};
return _this;
}
Expand Down
4 changes: 2 additions & 2 deletions umd/col-browser.min.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion umd/col-browser.min.js.map

Large diffs are not rendered by default.

0 comments on commit e43e5dc

Please sign in to comment.