Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 95b0bd1

Browse files
adding openOnClick and openOnKeyDown props
1 parent a77c643 commit 95b0bd1

File tree

3 files changed

+18
-6
lines changed

3 files changed

+18
-6
lines changed

‎README.md

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,6 @@ Whether you want to showcase a constant list of options or dynamically adapt to
2626

2727
- autoFocus
2828

29-
- Open Suggestion List on Enter Key
30-
3129
## Installation
3230

3331
> $ npm install react-custom-search-list @popperjs/core --save
@@ -92,6 +90,14 @@ function App() {
9290
- **children**
9391
- type : `ReactNode`
9492
- description : suggestions list
93+
- **openOnClick?**
94+
- type :`Boolean`
95+
- description : if it is true then the suggestion list will be open when the user clicks on the input
96+
- default : `True`
97+
- **openOnKeyDown?**
98+
- type : `(e) => Boolean`
99+
- description : if it returns true then the suggestion list will be open
100+
- default : `(e) => e.key === "Enter"`
95101
- **rootStyle?**
96102
- type : `Object`
97103
- description : style object of the `root` element

‎example/stories/dynamic-suggestions-list/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ function App() {
1616
value={value}
1717
onChange={(e) => setValue(e.target.value)}
1818
onClear={() => setValue('')}
19+
openOnKeyDown={() => true}
20+
autoFocus={true}
1921
fullWidth
2022
theme="outline"
2123
corner>

‎src/index.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ import ClearIcon from './icons/clear.js';
2525
* @param {Boolean} [props.corner=true] - if set true then border-radius would be "5px"
2626
* @param {Boolean} [props.autoFocus=false] - autoFocus attribute for the input element
2727
* @param {String} [props.inputName=""] - name attribute for the input element
28+
* @param {Boolean} [props.openOnClick=true] - if it is true then the suggestion list will be open when the user clicks on the input
29+
* @param {(e)=>Boolean} [props.openOnKeyDown=(e)=>e.key === 'Enter'] -it it returns true then the suggestion list will be open
2830
*/
2931
function ReactCustomSearchList(props) {
3032
const {
@@ -48,20 +50,22 @@ function ReactCustomSearchList(props) {
4850
corner = true,
4951
autoFocus = false,
5052
inputName = '',
53+
openOnClick = true,
54+
openOnKeyDown = (e) => e.key === 'Enter' || e.keyCode === 13,
5155
} = props;
5256
const [open, setOpen] = useState(false);
5357
const rootRef = useRef();
5458
const onClickHandler = useCallback(() => {
55-
setOpen(true);
56-
}, []);
59+
openOnClick&&setOpen(true);
60+
}, [openOnClick]);
5761
const onKeyDownHandler = useCallback(
5862
(e) => {
59-
if (e.key ==='Enter'||e.keyCode===13) {
63+
if (openOnKeyDown(e) ==true) {
6064
setOpen(true);
6165
}
6266
onKeyDown(e);
6367
},
64-
[onKeyDown],
68+
[onKeyDown,openOnKeyDown],
6569
);
6670
useEffect(() => {
6771
const rEl = document.documentElement,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /