Skip to content

Commit 039d63a

Browse files
sophiewu2333embbnux
authored andcommitted
fix bug -- update in The To dropdown list should be supported keyboard operation (#143)
* update in The To dropdown list should be supported keyboard operation * remove items judgement from contactdropdownlist to recipientinput * remove items judgement from contactdropdownlist to recipientinput * fix bug that selectedcontactindex will be bigger than relatedContactList.length
1 parent 543fe75 commit 039d63a

File tree

3 files changed

+24
-15
lines changed

3 files changed

+24
-15
lines changed

src/components/ContactDropdownList/index.js

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,7 @@ ContactItem.propTypes = {
4747
};
4848

4949
function ContactDropdownList(props) {
50-
let items = props.items;
51-
// MAX 5
52-
if (items.length > 5) {
53-
items = items.slice(0, 5);
54-
}
50+
const items = props.items;
5551
let listClassName = null;
5652
let hiddenClassName = null;
5753
if (items.length === 0 || !props.visibility) {
@@ -93,8 +89,8 @@ ContactDropdownList.propTypes = {
9389
})).isRequired,
9490
formatContactPhone: PropTypes.func.isRequired,
9591
addToRecipients: PropTypes.func.isRequired,
96-
active: PropTypes.bool.isRequired,
9792
setSelectedIndex: PropTypes.func.isRequired,
93+
selectedIndex: PropTypes.number.isRequired,
9894
};
9995

10096
ContactDropdownList.defaultProps = {

src/components/MessageList/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export default class MessageList extends Component {
2424
const totalScrollHeight = this.messagesListBody.scrollHeight;
2525
const clientHeight = this.messagesListBody.clientHeight;
2626
currentScrollHeight = this.messagesListBody.scrollTop;
27-
// loadNextPageMessages if srroll near buttom
27+
// loadNextPageMessages if scroll near buttom
2828
if (
2929
(totalScrollHeight - lastScrollHeight) > (clientHeight + 10) &&
3030
(totalScrollHeight - currentScrollHeight) <= (clientHeight + 10)

src/components/RecipientsInput/index.js

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,9 @@ class RecipientsInput extends Component {
8181
};
8282

8383
this.addSelectedContactIndex = () => {
84-
if (this.state.selectedContactIndex >= (this.props.searchContactList.length - 1)) {
84+
const length = this.props.searchContactList.length < 5 ?
85+
this.props.searchContactList.length : 5;
86+
if (this.state.selectedContactIndex >= (length - 1)) {
8587
this.setState({
8688
selectedContactIndex: 0,
8789
});
@@ -93,14 +95,16 @@ class RecipientsInput extends Component {
9395
};
9496

9597
this.reduceSelectedContactIndex = () => {
96-
if (this.state.selectedContactIndex >= (this.props.searchContactList.length - 1)) {
97-
this.setState({
98-
selectedContactIndex: (this.props.searchContactList.length - 1),
99-
});
100-
} else {
98+
const length = this.props.searchContactList.length < 5 ?
99+
this.props.searchContactList.length : 5;
100+
if (this.state.selectedContactIndex > 0) {
101101
this.setState(preState => ({
102102
selectedContactIndex: (preState.selectedContactIndex - 1),
103103
}));
104+
} else {
105+
this.setState({
106+
selectedContactIndex: (length - 1),
107+
});
104108
}
105109
};
106110

@@ -121,8 +125,12 @@ class RecipientsInput extends Component {
121125
if (this.props.value.length === 0) {
122126
return;
123127
}
124-
const relatedContactList = this.props.value.length >= 3 ?
128+
let relatedContactList = this.props.value.length >= 3 ?
125129
this.props.searchContactList : [];
130+
// MAX 5
131+
if (relatedContactList.length > 5) {
132+
relatedContactList = relatedContactList.slice(0, 5);
133+
}
126134
const currentSelected
127135
= relatedContactList[this.state.selectedContactIndex];
128136
if (currentSelected) {
@@ -143,12 +151,17 @@ class RecipientsInput extends Component {
143151
}
144152

145153
render() {
146-
const relatedContactList = this.props.value.length >= 3 ?
154+
let relatedContactList = this.props.value.length >= 3 ?
147155
this.props.searchContactList : [];
148156
const label = this.props.label ?
149157
(
150158
<label>{this.props.label}</label>
151159
) : null;
160+
// MAX 5
161+
if (relatedContactList.length > 5) {
162+
relatedContactList = relatedContactList.slice(0, 5);
163+
}
164+
152165
return (
153166
<div className={styles.container} onKeyDown={this.handleHotKey}>
154167
{label}

0 commit comments

Comments
 (0)