margaretlydon
commented
7 years ago Hi,
I have worked around this by implementing my own clear button like so:
const showSearchClear = searchTerm !== undefined && searchTerm.length > 0;
<div className="search-controls"> <SearchInput type="text" className="search-input" onChange={this.searchUpdated} onFocus={this.searchFocusHandler} placeholder={"Search Location"} value={searchTerm} /> <div className={cx("clearSearch", { show: showSearchClear, })} onClick={() => this.searchUpdated("")} /> </div>
and then styling the searchClear.
Margaret
Hi,
I am finding that the text clear button is not working on a phone or ipad if the keyboard is open. If the keyboard is closed it works just fine.
This is what is included in my render method:
<SearchInput className="search-input" onChange={this.searchUpdated} onFocus={this.searchFocusHandler} placeholder={"Search Location"} />
and these are my methods:
`searchFocusHandler() { // show the results list that this search controls this.setState({ showCountriesList: true, }); }
searchUpdated(term) { this.setState({ searchTerm: term }); }`
this is my styling:
`.search-input { height: 40px; position: relative; padding-left: 1.5em; padding-right: 1.5em; }
input[type="search"] { -webkit-appearance: textfield; }
.search-input::before { content: url(data:image/svg+xml,%3Csvg%0A%09%09%09%09%09%09%09%09%09%09xmlns%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%09%09%09%09%09%09%09%09%09data-name%3D%22Layer%203%22%0A%09%09%09%09%09%09%09%09%09%09viewBox%3D%220%200%2021.85%2022.23%22%0A%09%09%09%09%09%09%09%09%09%3E%0A%09%09%09%09%09%09%09%09%09%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M9.47%2018.94a9.47%209.47%200%201%201%209.47-9.47%209.48%209.48%200%200%201-9.47%209.47zM9.47%201a8.47%208.47%200%201%200%208.47%208.47A8.48%208.48%200%200%200%209.47%201z%22%20/%3E%0A%09%09%09%09%09%09%09%09%09%09%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M21.35%2022.23a.5.5%200%200%201-.35-.15l-5.57-5.57a.5.5%200%200%201%20.71-.71l5.57%205.57a.5.5%200%200%201-.35.85z%22%20/%3E%0A%09%09%09%09%09%09%09%09%09%3C/svg%3E); display: block; position: absolute; width: 17px; z-index: 3; left: 25px; top: 3px; line-height: 50px; height: 40px; opacity: 0.8; }
.search-input > input { width: 100%; border: none; line-height: 22px; padding-left: 35px; padding-right: 10px; height: 50px; position: relative; background-color: transparent; color: white; text-transform: uppercase; border-bottom: 1px solid; border-top: 1px solid; border-color: rgba(256, 256, 256, 0.2); font-style: italic; font-size: 0.875rem; border-radius: 0; -webkit-appearance: none; }
.search-input > input:focus { outline: none; }
.search-input > input::-webkit-search-cancel-button { position: relative; right: -5px;
-webkit-appearance: none; height: 20px; width: 20px; background: url(data:image/svg+xml,%3Csvg%...........svg_nonsense....); }`
Has anyone else experienced this issue?
Thanks for the help, Margaret