React Select

css/forms/style.less

@@ -1452,7 +1452,8 @@
 
         textarea,
         input:not(.rw-input),
-        select {
+        select,
+        .autocomlete {
             width: ~"calc(100% - 198px)";
 
             &[value=""] {
@@ -1511,6 +1512,82 @@
         max-width: 800px;
     }
 
+    .autocomlete {
+        
+
+        * {
+            outline: none;
+            box-shadow: none !important;
+        }
+
+        .react-select__control {
+            border-radius: 0;
+            border: 1px solid rgba(0,16,61,0.12);
+            height: 40px;
+            min-height: 40px;
+
+            &.react-select__control--menu-is-open {
+                border-color: var(--blue);
+            }
+
+            .react-select__value-container {
+                padding:0 12px;
+                height: 100%;
+                background: #fff;
+
+                &:not(.react-select__value-container--has-value) {
+                    background-color: #EDEFF5;
+                }
+
+                .react-select__input-container {
+                    margin: 0;
+                    padding: 0;
+                }
+            }
+
+            .react-select__indicators {
+                display: none;
+            }
+        }
+
+        .react-select__menu {
+            border-radius: 0;
+            border-width: 0px 1px 1px 1px;
+            border-style: solid;
+            border-color: rgba(0, 16, 61, 0.12);
+            border-radius: 0px 0px 4px 4px;
+            margin-top: 0;
+            top: 40px;
+            padding: 8px 12px;
+
+           .react-select__option {
+                color: #8E94A7;
+                font-size: 15px;
+                line-height: 24px;
+                background: transparent !important;
+                cursor: pointer;
+                padding: 0;
+
+                &:not(:last-child) {
+                    margin-bottom: 8px;
+                }
+
+                &:hover {
+                    color: #000;
+                }
+                
+                &.react-select__option--is-selected {
+                    color: var(--blue);
+                }
+
+                @media all and (max-width: 960px) {
+                    font-size: 13px;
+    line-height: 20px;
+                }
+            }
+        }
+    }
+
     &.questionnaire_4,
     &.questionnaire_5 {
         .form_field {

package.json

@@ -39,7 +39,7 @@
     "react-dropzone": "^14.2.2",
     "react-google-recaptcha-v3": "^1.10.0",
     "react-redux": "^7.2.6",
-    "react-select": "^5.4.0",
+    "react-select": "^5.7.1",
     "react-slick": "^0.29.0",
     "react-widgets": "^5.5.1",
     "redux": "^4.1.2",

pages/questionnaire/components/forms/Form_2_Contacts/index.js

@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import numeral from "numeral";
 import pluralize from 'pluralize-ru';
 import { SpinnerCircular } from 'spinners-react';
+import Select from 'react-select'
 
 export default class Form_2_Contacts extends React.Component 
 {
@@ -61,7 +62,11 @@ export default class Form_2_Contacts extends React.Component
 	render()
 	{
 		const { address, phone_check_loading, phone_number_format_error } = this.state;
-
+		const options = [
+			{ value: 'Москва', label: 'Москва' },
+			{ value: 'Казань', label: 'Казань' },
+			{ value: 'Воронеж', label: 'Воронеж' }
+		  ]
 		return (
 			<React.Fragment>
 				<form onSubmit={ this._handle_onFormSubmit } className="questionnaire questionnaire_2">
@@ -69,7 +74,19 @@ export default class Form_2_Contacts extends React.Component
 
 					<div className="form_field">
 						<label>Фактический адрес</label>
+						{/*
 						<input type="text" name="address" value={ address } placeholder="Введите адрес" onChange={ (event) => this._handle_onAddressChange(event.target.value) } required={ true }/>
+						 */}
+						<Select 
+							options={options} 
+							placeholder="Фактический адрес" 
+							noOptionsMessage={({inputValue}) => !inputValue ? noOptionsText :"Ничего не найдено"}
+							isSearchable={true}
+							className="autocomlete"
+							classNamePrefix="react-select"
+							//menuIsOpen={true}
+						/>
+						
 						<p>для юр.диц -  заполняется, если отличается от указанного в ЕГРЮЛ; для ИП - заполняется всегда</p>
 					</div>