Go to page zero when searching direct channels (mattermost#6977)

Revanth47 · Jul 27, 2017 · 07d4abe · 07d4abe
1 parent bf2bed9
commit 07d4abe
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 16 deletions.
diff --git a/components/more_direct_channels/more_direct_channels.jsx b/components/more_direct_channels/more_direct_channels.jsx
@@ -185,11 +185,18 @@ export default class MoreDirectChannels extends React.Component {
  }
  }
 
+ resetPaging = () => {
+ if (this.refs.multiselect) {
+ this.refs.multiselect.resetPaging();
+ }
+ }
+
  search(term) {
  clearTimeout(this.searchTimeoutId);
  this.term = term;
 
  if (term === '') {
+ this.resetPaging();
  this.onChange();
  return;
  }
@@ -203,7 +210,7 @@ export default class MoreDirectChannels extends React.Component {
 
  this.searchTimeoutId = setTimeout(
  () => {
- searchUsers(term, teamId);
+ searchUsers(term, teamId, {}, this.resetPaging);
  },
  Constants.SEARCH_TIMEOUT_MILLISECONDS
  );
@@ -315,6 +322,7 @@ export default class MoreDirectChannels extends React.Component {
  <Modal.Body>
  <MultiSelect
  key='moreDirectChannelsList'
+ ref='multiselect'
  options={users}
  optionRenderer={this.renderOption}
  values={this.state.values}

diff --git a/components/multiselect/multiselect.jsx b/components/multiselect/multiselect.jsx
@@ -17,14 +17,6 @@ export default class MultiSelect extends React.Component {
  constructor(props) {
  super(props);
 
- this.onChange = this.onChange.bind(this);
- this.onSelect = this.onSelect.bind(this);
- this.onAdd = this.onAdd.bind(this);
- this.onInput = this.onInput.bind(this);
- this.handleEnterPress = this.handleEnterPress.bind(this);
- this.nextPage = this.nextPage.bind(this);
- this.prevPage = this.prevPage.bind(this);
-
  this.selected = null;
 
  this.state = {
@@ -41,15 +33,15 @@ export default class MultiSelect extends React.Component {
  document.removeEventListener('keydown', this.handleEnterPress);
  }
 
- nextPage() {
+ nextPage = () => {
  if (this.props.handlePageChange) {
  this.props.handlePageChange(this.state.page + 1, this.state.page);
  }
  this.refs.list.setSelected(0);
  this.setState({page: this.state.page + 1});
  }
 
- prevPage() {
+ prevPage = () => {
  if (this.state.page === 0) {
  return;
  }
@@ -61,11 +53,15 @@ export default class MultiSelect extends React.Component {
  this.setState({page: this.state.page - 1});
  }
 
- onSelect(selected) {
+ resetPaging = () => {
+ this.setState({page: 0});
+ }
+
+ onSelect = (selected) => {
  this.selected = selected;
  }
 
- onAdd(value) {
+ onAdd = (value) => {
  if (this.props.maxValues && this.props.values.length >= this.props.maxValues) {
  return;
  }
@@ -83,7 +79,7 @@ export default class MultiSelect extends React.Component {
  this.refs.select.focus();
  }
 
- onInput(input) {
+ onInput = (input) => {
  if (input === '') {
  this.refs.list.setSelected(-1);
  } else {
@@ -94,7 +90,7 @@ export default class MultiSelect extends React.Component {
  this.props.handleInput(input);
  }
 
- handleEnterPress(e) {
+ handleEnterPress = (e) => {
  switch (e.keyCode) {
  case KeyCodes.ENTER:
  if (this.selected == null) {
@@ -106,7 +102,7 @@ export default class MultiSelect extends React.Component {
  }
  }
 
- onChange(values) {
+ onChange = (values) => {
  if (values.length < this.props.values.length) {
  this.props.handleDelete(values);
  }