Всех приветствую. Подскажите пож-та, пытаюсь сделать комбобокс и столкнулся с проблемой, нужно что бы onblur не срабатывал на дочерних элементах. А выбранное значение падало в input. Как это можно подправить ? Куда копать?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>
<div id="root">
</div>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
#target:hover {
background-color: #555;
color: white;
}
</style>
<script type="text/babel">
let colors = ["green", "blue", "yellow"];
let divSet = items => items.map(elem => <li> {elem} </li>);
class Combobox extends React.Component{
constructor(props) {
super(props);
this.closeHead = this.closeHead.bind(this);
this.onFocus = this.onFocus.bind(this);
}
onFocus() {
container.hidden = false;
let getcolors = divSet(colors);
let res = <ul>{getcolors}</ul>;
ReactDOM.render(
<div id="list">
{res}
</div>,
document.getElementById('container')
);
}
*!*
closeHead() {
container.hidden = true;
}
*/*
render() {
return (
<div >
<input type="text" id="text" placeholder="Начните вводить код или название" onFocus={this.onFocus} onBlur={this.closeHead} />
<div id="container"></div>
</div>
);
}
}
ReactDOM.render(
<Combobox />,
document.getElementById('root')
)
</script>
</body>
</html>