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>
+      </>
     );
   }
 }

umd/index.dev.js

@@ -4308,6 +4308,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+const PhoneEdit = react__WEBPACK_IMPORTED_MODULE_0___default().lazy(_ => __webpack_require__.e(/*! import() */ "src_widgets_phone-edit_jsx").then(__webpack_require__.bind(__webpack_require__, /*! ../widgets/phone-edit.jsx */ "./src/widgets/phone-edit.jsx")));
 
 
 
@@ -4522,6 +4523,18 @@ class CreateAccountView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Pu
       required: true
     }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "panel-form-row"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+      className: "small gray"
+    }, "Mobile phone number:")), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row"
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react__WEBPACK_IMPORTED_MODULE_0__.Suspense, {
+      fallback: react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, "Loading...")
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(PhoneEdit, {
+      autoFocus: false,
+      onShowCountrySelector: (code, dial) => console.log('onShowCountrySelector', code, dial),
+      onSubmit: (code, dial) => console.log('onSubmit', code, dial)
+    }))), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "panel-form-row"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_widgets_checkbox_jsx__WEBPACK_IMPORTED_MODULE_4__["default"], {
       id: "save-token",
       name: "save-token",