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 (
{label? @@ -147,12 +148,7 @@ class SearchableDropdown extends Component { : null } -
+
}
+ {errorMessage && +
+ {errorMessage} +
+ }
); } @@ -221,6 +222,8 @@ SearchableDropdown.propTypes = { ariaInvalid: bool, /** css class for main div searchableDropdown */ className: string, + /** Error message */ + errorMessage: string, }; SearchableDropdown.defaultProps = { diff --git a/src/SearchableDropdown.test.js b/src/SearchableDropdown.test.js index 8d8ee5c590..34bf917902 100644 --- a/src/SearchableDropdown.test.js +++ b/src/SearchableDropdown.test.js @@ -23,13 +23,16 @@ describe('', () => { inputValue:'', displayResetWhenInputHasValue:true, label:"Foo", - inputId: "inputid" + inputId: "inputid", + errorMessage: "404" }; const setHighlightedIndexSpy = jest.spyOn(SearchableDropdown.prototype, 'setHighlightedIndex'); const component = mountDropdownWithProps(props); - + test('errorMessage
', () => + expect(component.find('.ffe-field-error-message')).toHaveLength(1)); + test('renders', () => expect(component.find('.ffe-searchable-dropdown')).toHaveLength(1)); @@ -49,6 +52,7 @@ describe('', () => { expect(component.find(ScrollContainer)).toHaveLength(1); expect(component.state('showListContainer')).toEqual(true); }); + test('renders on arrowDown', () => { const arrowDownEvent = {key: 'ArrowDown', preventDefault: i}; component.find(Input).prop('onKeyDown')(arrowDownEvent);