fix(intl-phone-input): use input as root node (#380)

alfa-laboratory · Dec 4, 2017 · 61f8a69 · 61f8a69
1 parent 8761693
commit 61f8a69
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 35 deletions.
diff --git a/src/intl-phone-input/intl-phone-input.css b/src/intl-phone-input/intl-phone-input.css
@@ -5,10 +5,8 @@
 @import '../vars.css';
 
 .intl-phone-input {
-    display: inline-flex;
-
-    &__input {
-        &.input .input__addons_left + .input__control {
+    &.input {
+        .input__addons_left + .input__control {
             padding-left: 0;
         }
     }
@@ -19,6 +17,8 @@
             margin-bottom: -1px;
 
             .select-button {
+                /* Don't cut flag icon shadow in select button */
+                padding-left: 3px;
                 border-bottom-color: transparent;
                 box-shadow: none;
             }

diff --git a/src/intl-phone-input/intl-phone-input.jsx b/src/intl-phone-input/intl-phone-input.jsx
@@ -69,37 +69,35 @@ class IntlPhoneInput extends React.Component {
 
     render(cn, Input, Select) {
         return (
-            <div className={ cn() }>
-                <Input
-                    className={ cn('input') }
-                    ref={ (input) => { this.input = input; } }
-                    { ...this.props }
-                    focused={ this.state.inputFocused || this.state.selectFocused }
-                    leftAddons={
-                        <Select
-                            className={ cn('select') }
-                            ref={ (select) => { this.select = select; } }
-                            disabled={ this.props.disabled }
-                            mode='radio'
-                            options={ this.getOptions(cn) }
-                            popupSecondaryOffset={ this.getSelectPopupOffset() }
-                            renderButtonContent={ this.renderSelectButtonContent }
-                            size={ this.props.size }
-                            value={ [this.state.countryIso2] }
-                            onBlur={ this.handleSelectBlur }
-                            onChange={ this.handleSelectChange }
-                            onClick={ this.handleSelectClick }
-                            onFocus={ this.handleSelectFocus }
-                        />
-                    }
-                    noValidate={ true }
-                    type='tel'
-                    value={ this.getValue() }
-                    onBlur={ this.handleInputBlur }
-                    onChange={ this.handleInputChange }
-                    onFocus={ this.handleInputFocus }
-                />
-            </div>
+            <Input
+                className={ cn() }
+                ref={ (input) => { this.input = input; } }
+                { ...this.props }
+                focused={ this.state.inputFocused || this.state.selectFocused }
+                leftAddons={
+                    <Select
+                        className={ cn('select') }
+                        ref={ (select) => { this.select = select; } }
+                        disabled={ this.props.disabled }
+                        mode='radio'
+                        options={ this.getOptions(cn) }
+                        popupSecondaryOffset={ this.getSelectPopupOffset() }
+                        renderButtonContent={ this.renderSelectButtonContent }
+                        size={ this.props.size }
+                        value={ [this.state.countryIso2] }
+                        onBlur={ this.handleSelectBlur }
+                        onChange={ this.handleSelectChange }
+                        onClick={ this.handleSelectClick }
+                        onFocus={ this.handleSelectFocus }
+                    />
+                }
+                noValidate={ true }
+                type='tel'
+                value={ this.getValue() }
+                onBlur={ this.handleInputBlur }
+                onChange={ this.handleInputChange }
+                onFocus={ this.handleInputFocus }
+            />
         );
     }