Improve country dropdown UX and expose +prefix #833
Conversation
A prefix is now exposed through a change to the API for onOptionChange. This now returns the entire country object which includes iso2, prefix etc. This also shows the prefix in the Registration and Login screens as a prefix to the phone number field.
| @@ -115,7 +115,7 @@ export default class Dropdown extends React.Component { | |||
|
|
|||
| componentWillReceiveProps(nextProps) { | |||
| this._reindexChildren(nextProps.children); | |||
| const firstChild = React.Children.toArray(nextProps.children)[0]; | |||
| const firstChild = nextProps.children[0]; | |||
There was a problem hiding this comment.
I thought this was necessary? ie. children is essentially an opaque data structure and you needs to use React.children to interact with it?
There was a problem hiding this comment.
If you use React.children you get the full key of the child, something like .$GB. (I should've mentioned this TBF.)
There was a problem hiding this comment.
Ah right. I think there's still a problem though as it would be valid to pass only a single element to a dropdown, in which case this.props.children would not be an array?
There was a problem hiding this comment.
oh fair enough, I shall null guard it. Actually it would be an array with one item, but there might not be any children.
There was a problem hiding this comment.
TBH, if it is still an array with one child that's probably fine - I'm not too fussed about supporting dropdowns with no options.
There was a problem hiding this comment.
I have seen the dd get into that state first-hand so I think it'd be better to guard against it. There's nothing to highlight or to index, so it makes sense to return early.
A prefix is now exposed through a change to the API for onOptionChange. This now returns the entire country object which includes iso2, prefix etc.
This change adds the exposed prefix to phone number fields in the Registration and Login screens.
This is the second iteration on improving the login UI (element-hq/element-web#3524)
Also fixes not automatically selecting the first item in the dropdown: fixes element-hq/element-web#3686
traditional screenshot:
