From 9c67a4efc603f047f1561f6ff2694e5ad8e1a0c7 Mon Sep 17 00:00:00 2001
From: fikyair <shiming_xsm@163.com>
Date: Tue, 23 Nov 2021 20:21:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20select=20=E9=80=89?=
 =?UTF-8?q?=E4=B8=AD=20=E5=80=BC=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                           |  2 +-
 src/components/Input/input.tsx         | 14 +++++-
 src/components/Select/select.tsx       |  1 -
 src/components/Select/selectOption.tsx | 63 ++++++++++++--------------
 src/introduction.md                    |  6 +++
 src/welcome.stories.tsx                | 12 +++++
 6 files changed, 61 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index fd2851be..61dd0c0c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chocolate-ui",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Indulge in silky smoothness",
   "author": "shiming_xsm",
   "private": false,
diff --git a/src/components/Input/input.tsx b/src/components/Input/input.tsx
index c7bce9f9..fcf0c524 100644
--- a/src/components/Input/input.tsx
+++ b/src/components/Input/input.tsx
@@ -22,11 +22,20 @@ export interface InputProps
   prepend?: string | ReactElement;
   append?: string | ReactElement;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-  ref?: any,
+  ref?: any;
 }
 
 export const Input: FC<InputProps> = forwardRef((props, ref) => {
-  const { disabled, size, icon, prepend, append, style, ...restProps } = props;
+  const {
+    disabled,
+    size,
+    icon,
+    prepend,
+    append,
+    style,
+    onChange = () => {},
+    ...restProps
+  } = props;
   const [hover, setHover] = useState(false);
   const classnames = classNames(sc("wrapper"), {
     [`input-size-${size}`]: size,
@@ -61,6 +70,7 @@ export const Input: FC<InputProps> = forwardRef((props, ref) => {
         onMouseOver={() => setHover(!disabled)}
         onMouseLeave={() => setHover(false)}
         disabled={disabled}
+        onChange={onChange}
         {...restProps}
       />
       {append && <div className={sc("group-append")}>{append}</div>}
diff --git a/src/components/Select/select.tsx b/src/components/Select/select.tsx
index 9905e57b..abf4bce0 100644
--- a/src/components/Select/select.tsx
+++ b/src/components/Select/select.tsx
@@ -75,7 +75,6 @@ export const Select: React.FC<SelectProps> = (props) => {
           icon="angle-down"
           disabled={disabled}
           placeholder={placeholder}
-          // readOnly={!disabled}
           onClick={() => setShowOption(true)}
           value={inputValue}
         />
diff --git a/src/components/Select/selectOption.tsx b/src/components/Select/selectOption.tsx
index d98e53a2..d07785ed 100644
--- a/src/components/Select/selectOption.tsx
+++ b/src/components/Select/selectOption.tsx
@@ -1,51 +1,48 @@
-import React, { useContext, useState } from 'react'
-import classNames from 'classnames'
-import { scopedClass } from '../../utils/scopedClass'
-import { SelectContext } from './select'
+import React, { MouseEvent, useContext, useState } from "react";
+import classNames from "classnames";
+import { scopedClass } from "../../utils/scopedClass";
+import { SelectContext } from "./select";
 
 export interface SelectOptionProps {
-  value: string,
-  children: React.ReactNode,
-  disabled?: boolean,
-  active?: boolean,
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  active?: boolean;
 }
 
-const sc = scopedClass('chocolate-select')
+const sc = scopedClass("chocolate-select");
 
 const SelectOption: React.FC<SelectOptionProps> = (props) => {
-  const {
-    value,
-    children,
-    ...restProps
-  } = props
-  const context = useContext(SelectContext)
-  const [hover, setHover] = useState(false)
+  const { value, children, ...restProps } = props;
+  const context = useContext(SelectContext);
+  const [hover, setHover] = useState(false);
 
-  const handleOptionItem = (item: string) => {
+  const handleOptionItem = (e: MouseEvent<HTMLLIElement>) => {
+    const _value = (e.target as any).innerHTML;
     if (!props.disabled) {
-      context.onSelect && context.onSelect(item)
-      context.onShowOption && context.onShowOption(false)
+      context.onSelect && context.onSelect(_value);
+      context.onShowOption && context.onShowOption(false);
     }
-  }
-  const classnames = classNames(sc('option-list-item'), {
-    'is-disabled': props.disabled,
-    'is-active': value === context.value,
-    'is-hover': hover,
-  })
+  };
+  const classnames = classNames(sc("option-list-item"), {
+    "is-disabled": props.disabled,
+    "is-active": value === context.value,
+    "is-hover": hover,
+  });
   return (
     <li
       className={classnames}
-      onMouseOver={()=>{
-        if(!props.disabled){
-          setHover(true)
+      onMouseOver={() => {
+        if (!props.disabled) {
+          setHover(true);
         }
       }}
-      onMouseLeave={()=>setHover(false)}
-      onClick={() => handleOptionItem(value)}
+      onMouseLeave={() => setHover(false)}
+      onClick={handleOptionItem}
       {...restProps}
     >
       {children}
     </li>
-  )
-}
-export default SelectOption
\ No newline at end of file
+  );
+};
+export default SelectOption;
diff --git a/src/introduction.md b/src/introduction.md
index 13466e6b..7d9d6495 100644
--- a/src/introduction.md
+++ b/src/introduction.md
@@ -12,6 +12,12 @@ npm install chocolate-ui --save
 yarn add chocolate-ui
 `
 
+##### 💁‍♂️ 在线演示
+
+[chocolate-ui.com](https://60e31bd4495b7b003b0b96a3-qwpgkogipx.chromatic.com/)
+
+[![Edit nn6yr2m94](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/agitated-lamarr-2t34j?autoresize=1&hidenavigation=1&expanddevtools=1)
+
 #### 📖 使用
 
 1、引入
diff --git a/src/welcome.stories.tsx b/src/welcome.stories.tsx
index 5916e564..7e05e9d7 100644
--- a/src/welcome.stories.tsx
+++ b/src/welcome.stories.tsx
@@ -29,6 +29,18 @@ storiesOf('Welcome page', module)
         <p> <span role="img" aria-label="chocolateUi" >🍫</span> Chocolate-Ui 即插即用，纵享丝滑 <span role="img" aria-label="chocolateUi" > 🎗️</span></p>
         <p> 一个 Web 端的 React 组件库 </p>
         <p> 此刻尽丝滑！ </p>
+        <iframe
+          src="https://codesandbox.io/s/agitated-lamarr-2t34j?autoresize=1&hidenavigation=1&expanddevtools=1"
+          style={{
+            width: "100%",
+            height: "555px",
+            border: 0,
+            borderRadius: "4px",
+            overflow: "hidden",
+            margin: "50px 0"
+          }}
+          sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+        />
       </div>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         <ReactMarkDown