diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css index b83e604f23ecda9ca9251c03ce2da6ca55b1c1de..d80a27d2cb77156ad5072db44828bd243898cb9b 100644 --- a/examples/web/react/components/button/button.css +++ b/examples/web/react/components/button/button.css @@ -49,10 +49,12 @@ position: relative; } +.button.simple:focus, .button.simple:hover { background-color: #50cb93; } +.button.simple.red:focus, .button.simple.red:hover { background-color: #e63946; } diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx index f57f5530986c106f1e73e7dc012c52d2fce22c80..5c5a734b3dc666fbdb1b808e60f75459747b33a0 100644 --- a/examples/web/react/components/button/button.tsx +++ b/examples/web/react/components/button/button.tsx @@ -1,4 +1,4 @@ -import React, { ChangeEvent, FC } from "react"; +import React, { ChangeEvent, FC, useRef } from "react"; import "./button.css"; @@ -37,6 +37,7 @@ export const Button: FC<ButtonProps> = ({ file ? "file" : "", ...style ].join(" "); + const fileRef = useRef<HTMLInputElement>(null); const onFileChange = (event: ChangeEvent<HTMLInputElement>) => { if (!event.target.files) return; if (event.target.files.length === 0) return; @@ -54,6 +55,7 @@ export const Button: FC<ButtonProps> = ({ }; const onKeyPress = (event: React.KeyboardEvent) => { if (event.key !== "Enter") return; + if (file) fileRef.current?.click(); onClick && onClick(); }; const renderSimple = () => ( @@ -77,7 +79,12 @@ export const Button: FC<ButtonProps> = ({ > {image && <img src={image} alt={imageAlt ?? text ?? "button"} />} {file && ( - <input type="file" accept={accept} onChange={onFileChange} /> + <input + ref={fileRef} + type="file" + accept={accept} + onChange={onFileChange} + /> )} <span>{text}</span> </span>