From a4ceaaa49e1b4b8501cafb37e0a298d0af3f5216 Mon Sep 17 00:00:00 2001
From: Guillaume Cusnieux <guillaume.cusnieux@graviteesource.com>
Date: Sat, 6 Nov 2021 09:13:04 +0100
Subject: [PATCH] docs(gv-table): add notes about `select` integration

fix: #329
---
 src/atoms/gv-select.js                | 4 +++-
 stories/molecules/gv-table.stories.js | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/atoms/gv-select.js b/src/atoms/gv-select.js
index a9072ca2..de334f9d 100644
--- a/src/atoms/gv-select.js
+++ b/src/atoms/gv-select.js
@@ -27,7 +27,9 @@ import { InputElement } from '../mixins/input-element';
 import { withResizeObserver } from '../mixins/with-resize-observer';
 
 /**
- * A select component.
+ * A select component, is more like a list box...
+ * ⚠️ Please use `<gv-select-native>` component if you don't need strong customization.
+ * ⚠️ DO NO USE IT inside a `<gv-table>` component to avoid any scroll or overlapping issue.
  *
  * ## Details
  * * has @theme facet
diff --git a/stories/molecules/gv-table.stories.js b/stories/molecules/gv-table.stories.js
index 69609f59..e2983483 100644
--- a/stories/molecules/gv-table.stories.js
+++ b/stories/molecules/gv-table.stories.js
@@ -148,7 +148,7 @@ export const components = makeStory(conf, {
         data: [
           { field: 'name', label: 'Name' },
           { field: 'value', label: 'Component', type: 'gv-input', attributes: { clipboard: true } },
-          { label: 'List', type: 'gv-select', attributes: { options: ['Admin', 'Owner'] } },
+          { label: 'List', type: 'gv-select-native', attributes: { options: ['Admin', 'Owner'] } },
           { label: 'Button', type: 'gv-button', attributes: { innerHTML: 'Click me !' } },
           {
             label: 'Confirm',
@@ -194,7 +194,7 @@ export const dynamicRows = makeStory(conf, {
           {
             field: 'name',
             label: 'Name',
-            type: (item) => (item._new ? 'gv-input' : item._select ? 'gv-select' : 'label'),
+            type: (item) => (item._new ? 'gv-input' : item._select ? 'gv-select-native' : 'label'),
             attributes: {
               innerHTML: (item) => (item._new ? '' : item.name),
               required: true,