Commit f0ef425c authored by Mathieu Delestre's avatar Mathieu Delestre

autocomplete update (bug fix and theme adjustment)

parent 2ab2fe6e
......@@ -4,10 +4,11 @@
// ------------------------------------------------------------------------
// ------------------------------------------------------------------------
const {useState, useRef, useEffect, Component} = React;
import React, {useState, useRef, useEffect, Component} from 'react';
function Autocomplete(props){
const node = useRef();
const [label, setLabel] = useState(props.label || null);
const [placeholder, setPlaceholder] = useState(props.placeholder || null);
const [selectedValue, setSelectedValue] = useState(props.value || "");
......@@ -28,10 +29,8 @@ function Autocomplete(props){
// INPUT USER EVENT
const handleInputFocus = (e) => {
clearTimeout(blurDelay); // avoid panel close on multiple click on select field
setFocus(false);
setSearchValue("");
setTimeout(() => setFocus(true),10);
setFocus(true);
};
const handleInputChange = (e) => {
updateSelectedValue(e.target.value);
......@@ -43,14 +42,12 @@ function Autocomplete(props){
setSearchValue(e.target.value);
setActiveIndex(0);
};
const handleSearchBlur = (e) => {
blurDelay = setTimeout(() => setFocus(false),100);
};
const handleSearchKeyUp = (e) => {
var fo = filteredOptions();
if(e.keyCode===13) {
//RETURN
setFocus(false);
let o = filteredOptions()[activeIndex]
let o = fo[activeIndex]
if(o)
{
updateSelectedValue(o.value)
......@@ -59,9 +56,9 @@ function Autocomplete(props){
else if(e.keyCode===27) //ESC
setFocus(false);
else if(e.keyCode===40) //DOWN
setActiveIndex(options.length > 0 ? (activeIndex+1)%options.length : 0)
setActiveIndex(fo.length > 0 ? Math.min(activeIndex+1, fo.length-1) : 0)
else if(e.keyCode===38) //UP
setActiveIndex(options.length > 0 ? (activeIndex-1)%options.length : 0)
setActiveIndex(fo.length > 0 ? Math.max(activeIndex-1, 0) : 0)
};
const handleOptionSelection = (o) => {
......@@ -74,14 +71,28 @@ function Autocomplete(props){
|| o.value.toLowerCase().match(searchValue.toLowerCase())
});
const handleClick = e => {
if (node.current.contains(e.target)) {
// inside click
return;
}
// outside click
setFocus(false)
};
useEffect(() => {
// call on render
if(focus)
searchInputRef.current.focus();
});
// add when mounted
document.addEventListener("mousedown", handleClick);
// return function to be called when unmounted
return () => {
document.removeEventListener("mousedown", handleClick);
};
}, [focus]); // executé au démarrage puis en cas de mise à jour de focus
return (
<div className="UI-autocomplete">
<div className="UI-autocomplete" ref={node}>
{
typeof label === "string" && label.length>0
? <label className="UI-autocomplete-label">{label} </label>
......@@ -101,11 +112,10 @@ function Autocomplete(props){
<input type="text" ref={searchInputRef} value={searchValue} placeholder={placeholder}
onChange={handleSearchChange}
onKeyUp={handleSearchKeyUp}
onBlur={handleSearchBlur}
/>
</li>
<div className="UI-autocomplete-options-wrapper">
{filteredOptions().map((o,index) => <li class="UI-autocomplete-option" index={index} active={index==activeIndex ? 'true':'false'} key={index} onClick={() => handleOptionSelection(o)}>{o.label}</li>)}
{filteredOptions().map((o,index) => <li className="UI-autocomplete-option" index={index} active={index==activeIndex ? 'true':'false'} key={index} onClick={() => handleOptionSelection(o)}>{o.label}</li>)}
</div>
</ul>
</div>
......
$label-color:inherit;
$input-color:#333;
$input-background:#fff;
$input-color:#fff;
$input-background:#333;
$input-border:#aaa;
$input-placeholder:#aaa;
$options-color:#333;
$options-background:#fff;
$options-color:#fff;
$options-background:#333;
$options-border:#aaa;
$option-hover-color:#fff;
$option-hover-background:#999;
$option-hover-background:#666;
$option-active-color:#fff;
$option-active-background:#aaa;
$option-active-background:#00b0ed;
// options list display on input focus
.UI-autocomplete-options {
......@@ -31,38 +31,42 @@ $option-active-background:#aaa;
.UI-autocomplete-input {
display: inline-block;
position: relative;
max-width: 100%;
}
.UI-autocomplete-input select {
position: relative;
z-index: 1;
padding: 0.5em;
border-radius:0.25em;
border:1px solid $input-border;
color:$input-color;
background:$input-background;
max-width: 100%;
}
.UI-autocomplete-input input {
padding: 0.5em;
border-radius:0.25em;
padding: 0.25em;
border:1px solid $input-border;
color:$input-color;
background:$input-background;
height: auto !important;
line-height: 1em !important;
width: 100% !important;
&::placeholder {
color:$input-placeholder;
}
&:focus {
background:$input-background;
color:$input-color;
}
}
.UI-autocomplete-options {
position: absolute;
position: fixed;
z-index: 2;
top: 2.25em;
list-style-type: none;
padding: .25em;
margin: 0;
border:1px solid $options-border;
border-radius:0.25em;
color:$options-color;
background:$options-background;
min-width: 100%;
.UI-autocomplete-option {
cursor: pointer;
padding: .25em;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment