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 93797fd

Browse files
fix onKeyDown issue and provide autoFocus feature
1 parent 46a053e commit 93797fd

File tree

4 files changed

+19
-11
lines changed

4 files changed

+19
-11
lines changed

‎README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ Whether you want to showcase a constant list of options or dynamically adapt to
2020

2121
- Lightweight
2222

23+
- autoFocus
24+
25+
- Open Suggestion List on Enter Key
26+
2327
## Installation
2428

2529
> $ npm install react-custom-search-list @popperjs/core --save
@@ -119,6 +123,9 @@ function App() {
119123
- type : `"outline"|"underline"|"panel"`
120124
- description : searchbox theme
121125
- default : `"outline"`
126+
- **autoFocus?**
127+
- type : `Boolean`
128+
- default : `Fasle`
122129

123130
## Test
124131

‎src/index.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import ClearIcon from './icons/clear.js';
2323
* @param {Function} [props.onClear=()=>{}] - triggerd when the user clicks on the default Clear icon
2424
* @param {"underline"|"outline"|"panel"} [props.theme="outline"] - searchbox theme
2525
* @param {Boolean} [props.corner=true] - if set true then border-radius would be "5px"
26+
* @param {Boolean} [props.autoFocus=false] - autoFocus attribute for the input element
2627
*/
2728
function ReactCustomSearchList(props) {
2829
const {
@@ -44,6 +45,7 @@ function ReactCustomSearchList(props) {
4445
onClear = () => {},
4546
theme = 'outline',
4647
corner = true,
48+
autoFocus = false,
4749
} = props;
4850
const [open, setOpen] = useState(false);
4951
const rootRef = useRef();
@@ -52,12 +54,10 @@ function ReactCustomSearchList(props) {
5254
}, []);
5355
const onKeyDownHandler = useCallback(
5456
(e) => {
55-
(e) => {
56-
if (e.key.toLowerCase() === 'enter' && open === false) {
57-
setOpen(true);
58-
}
59-
onKeyDown(e);
60-
};
57+
if (e.key === 'Enter' || e.keyCode === 13) {
58+
setOpen(true);
59+
}
60+
onKeyDown(e);
6161
},
6262
[onKeyDown],
6363
);
@@ -98,6 +98,7 @@ function ReactCustomSearchList(props) {
9898
onBlur={onBlur}
9999
placeholder={placeholder}
100100
style={inputStyle}
101+
autoFocus={autoFocus}
101102
/>
102103
{ClearIconComponent ? <ClearIconComponent value={value} onClear={onClear} /> : null}
103104

‎style/react-custom-search-list.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,25 +61,25 @@
6161
.panel [data-popper-placement|=bottom] {
6262
margin-top: -1px !important;
6363
border-top: none;
64-
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px4px 0pxrgba(0, 0, 0, 0.14), 0px 3px8px0px rgba(0, 0, 0, 0.12);
64+
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 4px 3px-2pxrgba(0, 0, 0, 0.14), 0px 6px5px-2px rgba(0, 0, 0, 0.12);
6565
}
6666
.panel [data-popper-placement|=bottom] + .rc-search-suggestions-container {
6767
border: 1px solid rgb(232, 232, 232);
6868
border-bottom: none;
69-
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px4px 0pxrgba(0, 0, 0, 0.14), 0px 1px8px0px rgba(0, 0, 0, 0.12);
69+
box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 4px 2px-1pxrgba(0, 0, 0, 0.14), 0px 6px4px-1px rgba(0, 0, 0, 0.12);
7070
}
7171
.panel [data-popper-placement|=bottom] + .rc-search-suggestions-container .rc-search-suggestions-divider-bottom {
7272
display: block;
7373
}
7474
.panel [data-popper-placement|=top] {
7575
margin-bottom: -1px !important;
7676
border-bottom: none;
77-
box-shadow: 0px -2px 5px 0pxrgb(207,207,207);
77+
box-shadow: 0px -2px 5px -2pxrgba(73,73,73,0.19);
7878
}
7979
.panel [data-popper-placement|=top] + .rc-search-suggestions-container {
8080
border: 1px solid rgb(232, 232, 232);
8181
border-bottom: top;
82-
box-shadow: 0px 0px 5px0pxrgb(207,207,207);
82+
box-shadow: 0px 0px 3px-2pxrgba(73,73,73,0.19);
8383
}
8484
.panel [data-popper-placement|=top] + .rc-search-suggestions-container .rc-search-suggestions-divider-top {
8585
display: block;

‎style/react-custom-search-list.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
(0)

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