From a166a58d5d50983b98e703580a311163791309e8 Mon Sep 17 00:00:00 2001
From: MaxOvs <gshk3669@gmail.com>
Date: Mon, 26 Dec 2022 21:22:55 +0300
Subject: [PATCH] Fix methodts in select

---
 README.md                   | 14 +++++++-------
 package.json                |  2 +-
 src/cg-select.js            | 21 +++++++++++----------
 src/main.scss               |  2 +-
 src/style/nativeSelect.scss | 14 ++++----------
 5 files changed, 24 insertions(+), 29 deletions(-)

diff --git a/README.md b/README.md
index 87ab5ae..1670887 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # CG-SELECT
 
-## version ~ 0.1.14
+## version ~ 0.1.16
 
 Этот компонент позволяет создать кастомный селект. Он предлагает более гибкую настройку и использование селекта.
 Доступна кастомизация, мультивыбор и живой поиск по елементам.
@@ -45,8 +45,8 @@ npm i cg-select
 ### Пример создния обычного селекта
 
 ```javascript
-import {DropDown} from 'cg-select/src/cg-select';
-import 'cg-select/src/main.scss'
+import { DropDown } from 'cg-select/src/cg-select';
+import 'cg-select/src/main.scss';
 
 const dropdown = new DropDown({
   selector: '.cg-dropdown_selector',
@@ -88,10 +88,10 @@ const dropdown = new DropDown({
 
 ## Compatibility
 
-Совместимость с приложениями |  JS  |  React  | Angular |  Vue |
-| -------------------------- | :--: | :-----: | :-----: | :--: |
-| CG-SELECT                  | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |  ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png)|
-| Комментарий                | Протестирован в Js приложениях и работает успешно.|Работает только с костылем в виде `setTimeout()` | тесты не проведены| тесты не проведены |
+| Совместимость с приложениями |                                    JS                                    |                                                                      React                                                                       |                                 Angular                                 |                                   Vue                                   |
+| ---------------------------- | :----------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------: | :---------------------------------------------------------------------: |
+| CG-SELECT                    | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/yes.png) ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) | ![image](https://github.com/apuc/cg-select/blob/main/src/images/no.png) |
+| Комментарий                  |            Протестирован в Js приложениях и работает успешно.            |                                                 Работает только с костылем в виде `setTimeout()`                                                 |                           тесты не проведены                            |                           тесты не проведены                            |
 
 ## History
 
diff --git a/package.json b/package.json
index 78e8c21..9a0bc0d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cg-select",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "description": "Feature rich Select control for React/JS with multiselect, autocomplete and styling",
   "author": {
     "name": "CraftGroup",
diff --git a/src/cg-select.js b/src/cg-select.js
index 9df2170..c38ade4 100644
--- a/src/cg-select.js
+++ b/src/cg-select.js
@@ -853,18 +853,19 @@ export class DropDown {
     if(nativeSelectMode === true){
       const select = this.#element.querySelector('.cg-select');
       const list = this.#element.querySelector('.list');
-      const nativeSelect = this.#element.querySelector('.nativeSelect');
+      const nativeSelect = this.#element.querySelector('.nativeSelect')
 
-
-      // if(win < 576){
-       
+      if(win < 576){
+        select.classList.add('displayHide');
+        list.classList.add('displayHide');
+        nativeSelect.classList.add('nativeSelectActive');
         
-      // } else if( win > 576){
-      //   select.classList.remove('displayHide');
-      //   list.classList.remove('displayHide');
-      //   nativeSelect.classList.remove('nativeSelectActive');
-      //   nativeSelect.classList.add('displayHide');
-      // }
+      } else if( win > 576){
+        select.classList.remove('displayHide');
+        list.classList.remove('displayHide');
+        nativeSelect.classList.remove('nativeSelectActive');
+        nativeSelect.classList.add('displayHide');
+      }
     } else{
       return
     }
diff --git a/src/main.scss b/src/main.scss
index 5d0f998..6144c11 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -292,7 +292,7 @@ input[type='checkbox'] {
 }
 
 .displayHide {
-  display: none !important;
+  display: none;
 }
 
 /*320px - 576px*/
diff --git a/src/style/nativeSelect.scss b/src/style/nativeSelect.scss
index 98f9672..596572c 100644
--- a/src/style/nativeSelect.scss
+++ b/src/style/nativeSelect.scss
@@ -20,16 +20,10 @@
 
 .nativeSelectActive {
   display: block;
-}
-
-@media (max-width: 12450px) {
-  .nativeSelect {
-    display: none;
-  }
-
-  // .cg-select {
-  //   display: flex !important;
-  // }
+  min-width: 235px;
+  height: 50px;
+  border: none;
+  border-radius: 10px;
 }
 
 @media (max-width: 576px) {