attempt to integrate phone editing

src/views/create-account-view.jsx

@@ -1,5 +1,5 @@
 // Account registration.
-import React from 'react';
+import React, { Suspense } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import AvatarCrop from '../widgets/avatar-crop.jsx';
@@ -178,11 +178,15 @@ export default class CreateAccountView extends React.PureComponent {
           }</FormattedMessage>
         </div>
         <div className="panel-form-row">
-          (<Suspense fallback={<div>Loading...</div>}>
+          <label className="small gray">Mobile phone number:</label>
+        </div>
+        <div className="panel-form-row">
+          <Suspense fallback={<div>Loading...</div>}>
             <PhoneEdit
+              autoFocus={false}
               onShowCountrySelector={(code, dial) => console.log('onShowCountrySelector', code, dial)}
               onSubmit={(code, dial) => console.log('onSubmit', code, dial)} />
-          </Suspense>)
+          </Suspense>
         </div>
         <div className="panel-form-row">
           <CheckBox id="save-token" name="save-token" checked={this.state.saveToken}

src/widgets/phone-edit.jsx

@@ -20,7 +20,6 @@ class PhoneEdit extends React.PureComponent {
 
     this.handleChange = this.handleChange.bind(this);
     this.handleFinished = this.handleFinished.bind(this);
-    this.handleClear = this.handleClear.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.showCountrySelector = this.showCountrySelector.bind(this);
   }
@@ -34,17 +33,10 @@ class PhoneEdit extends React.PureComponent {
     this.props.onSubmit(this.state.localNumber.trim());
   }
 
-  handleClear(e) {
-    e.preventDefault();
-    const countryCode = this.props.countryCode || 'US';
-    this.setState({localNumber: '', countryCode: countryCode, dialCode: this.codeMap[countryCode || 'US']});
-  }
 
   handleKeyDown(e) {
     if (e.key === 'Enter') {
       this.handleFinished(e);
-    } else if (e.key === 'Escape') {
-      this.handleClear(e);
     }
   }
 
@@ -64,17 +56,14 @@ class PhoneEdit extends React.PureComponent {
 
   render() {
     return (
-      <div className="panel-form-row">
+      <>
         <span className="dial-code" onClick={this.showCountrySelector}>
           <span className="country-flag">{flagEmoji(this.state.countryCode)}&nbsp;</span>
           +{this.state.dialCode}&nbsp;</span>
         <input type="tel" placeholder={this.state.placeholder}
             value={this.state.localNumber} onChange={this.handleChange}
             maxLength={17} onKeyDown={this.handleKeyDown} required autoFocus={this.props.autoFocus} />
-        {this.state.localNumber ?
-          <a href="#" onClick={this.handleClear}><i className="material-icons">highlight_off</i></a>
-          : <span><i className="material-icons">&nbsp;</i></span>}
-      </div>
+      </>
     );
   }
 }