diff --git a/CHANGELOG.md b/CHANGELOG.md index c2c4055947..a7b75dfeec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,20 @@ # Changelog for ffe-search-dropdown-react -## v.2.0.0 -* Set inputValue outside the component to be able to reset and -change the value without interfering with the component. + +## v2.1.0 +* Added errorMessage prop +* Explicit aria-invalid handling in searchable-dropdown.less + +## v2.0.0 +* Set inputValue outside the component to be able to reset and +change the value without interfering with the component. * attributes onSelect, onReset and onChange should now update inputValue and not return it. * Removed attribute initialInputValue, added attribute inputValue. ## v1.1.4 * hotfix div wrapper classname with version for npm -## v.1.1.3 +## v1.1.3 * Bumped version due to prepublish 1.1.2(unknown why) ## v1.1.2 diff --git a/less/searchable-dropdown.less b/less/searchable-dropdown.less index 5eb1015df4..f1017fc902 100644 --- a/less/searchable-dropdown.less +++ b/less/searchable-dropdown.less @@ -26,17 +26,25 @@ transition: all @ffe-transition-duration @ffe-ease; width: 100%; - &:hover { + &[aria-invalid="true"] { + .ffe-chevron-icon-with-color(@ffe-orange-fire); + } + + &:not([aria-invalid="true"]):hover { border-color: @ffe-blue-azure; } &:focus, &:active { - border-color: @ffe-blue-azure; box-shadow: 0 0 0 2px @ffe-blue-focus; outline: none; } + &:not([aria-invalid="true"]):focus, + &:not([aria-invalid="true"]):active { + border-color: @ffe-blue-azure; + } + &:-moz-focusring { color: transparent; text-shadow: 0 0 0 @ffe-black; @@ -53,7 +61,7 @@ } } &__display-reset { - background-image:none; + background-image:none!important; } &__reset-button { position: absolute; diff --git a/package.json b/package.json index dc67605b08..dc00129199 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffe-searchable-dropdown-react", - "version": "2.0.0", + "version": "2.1.0", "description": "Dropdown with search option", "scripts": { "build": "babel -d lib --ignore=*.test.js src", diff --git a/src/InputField.js b/src/InputField.js index d8afdf5872..7ab13ac1d7 100644 --- a/src/InputField.js +++ b/src/InputField.js @@ -28,7 +28,7 @@ class Input extends Component { "ffe-searchable-dropdown__dropdown-input-field", {"ffe-searchable-dropdown__display-reset": this.displayReset()} )} - aria-invalid={ariaInvalid} + aria-invalid={ String(ariaInvalid) } id={inputId} onBlur={onBlur} onChange={onInputChange} diff --git a/src/SearchableDropdown.js b/src/SearchableDropdown.js index 6959c202b5..209e82e018 100644 --- a/src/SearchableDropdown.js +++ b/src/SearchableDropdown.js @@ -136,9 +136,10 @@ class SearchableDropdown extends Component { } render() { - const { dropdownAttributes, noMatch, placeholder, renderDropdownElement, label } = this.props; + const { dropdownAttributes, noMatch, placeholder, renderDropdownElement, label, errorMessage } = this.props; const { highlightedElementIndex, showListContainer, searchTerm } = this.state; const filteredList = this.filterList(searchTerm); + return (