diff --git a/src/components/SchoolsLookUp/SchoolsLookUp.js b/src/components/SchoolsLookUp/SchoolsLookUp.js index f51d59ce..7cf91f5e 100644 --- a/src/components/SchoolsLookUp/SchoolsLookUp.js +++ b/src/components/SchoolsLookUp/SchoolsLookUp.js @@ -46,6 +46,7 @@ class SchoolsLookUp extends Component { options: [], query: '', isSearching: false, + isDefaultOptionHighlighted: true, lookup, }; @@ -54,6 +55,8 @@ class SchoolsLookUp extends Component { this.handleLookup = this.handleLookup.bind(this); this.handleManual = this.handleManual.bind(this); this.handleBlur = this.handleBlur.bind(this); + this.handleDefaultOptionHoverOff = this.handleDefaultOptionHoverOff.bind(this); + this.handleInputChange = this.handleInputChange.bind(this); this.renderMenu = this.renderMenu.bind(this); this.renderSingleInput = this.renderSingleInput.bind(this); this.renderEstablishmentDetails = this.renderEstablishmentDetails.bind(this); @@ -144,7 +147,7 @@ class SchoolsLookUp extends Component { onChange(identifier, { target: { value: mappedData[identifier] } }); }); // display selection and reset fetched schools - this.setState({ lookup: HIDE_LOOKUP, options: [] }); + this.setState({ lookup: HIDE_LOOKUP, options: [], isDefaultOptionHighlighted: false }); } /** @@ -176,6 +179,20 @@ class SchoolsLookUp extends Component { } } + /** + * Handle changing text value inside search box + */ + handleInputChange() { + this.setState({ isDefaultOptionHighlighted: true }); + } + + /** + * Handle hovering off default option + */ + handleDefaultOptionHoverOff() { + this.setState({ isDefaultOptionHighlighted: false }); + } + /** * Render single input * @param {string} labelText @@ -304,30 +321,27 @@ class SchoolsLookUp extends Component { * @return {XML} */ renderMenu(results, menuProps) { + const { isSearching, isDefaultOptionHighlighted, query } = this.state; // do not show results until search is complete - if (menuProps.emptyLabel === 'Searching...' || this.state.isSearching === true || - (results.length === 0 && this.state.query && - this.state.query.toUpperCase() !== menuProps.text.toUpperCase()) + if (menuProps.emptyLabel === 'Searching...' || isSearching === true || + (results.length === 0 && query && query.toUpperCase() !== menuProps.text.toUpperCase()) ) { return
; } - // if there are search results, add default option - if (results.length > 0) { - results.unshift( - { - name: 'Please select a school from the list below', - id: 0, - }, - ); - } + const MenuHeader = props =>
  • ; return ( + + Please select a school from the list below + { results.map((result, index) => ( - - {SchoolsLookUp.renderMenuItemChildren(result)} - +
    + + {SchoolsLookUp.renderMenuItemChildren(result)} + +
    )) }     @@ -377,6 +391,7 @@ class SchoolsLookUp extends Component { bsSize="large" onSearch={this.handleSearch} onChange={this.handleChange} + onInputChange={this.handleInputChange} className="schoolsLookUpForm" labelKey={option => `${option.id !== 0 ? `${option.name} ${option.post_code}` : ''}`} placeholder="Search" diff --git a/yarn.lock b/yarn.lock index 00053fa6..c7cb76ee 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,9 +2,9 @@ # yarn lockfile v1 -"@comicrelief/pattern-lab@7.8.0": - version "7.8.0" - resolved "https://registry.yarnpkg.com/@comicrelief/pattern-lab/-/pattern-lab-7.8.0.tgz#7da5fdb930057857c29f8a20e7545f636e578fcc" +"@comicrelief/pattern-lab@7.8.1": + version "7.8.1" + resolved "https://registry.yarnpkg.com/@comicrelief/pattern-lab/-/pattern-lab-7.8.1.tgz#1531d221ed7f73f211f02ac6eb22e69155eab322" dependencies: susy "^2.2.12" @@ -255,14 +255,10 @@ acorn@^5.0.0, acorn@^5.1.1: version "5.1.2" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.2.tgz#911cb53e036807cf0fa778dc5d370fbd864246d7" -address@1.0.2: +address@1.0.2, address@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af" -address@^1.0.1: - version "1.0.3" - resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9" - adjust-sourcemap-loader@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-1.1.0.tgz#412d92404eb61e4113635012cba53a33d008e0e2" @@ -2973,20 +2969,13 @@ domutils@1.1: dependencies: domelementtype "1" -domutils@1.5.1: +domutils@1.5.1, domutils@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf" dependencies: dom-serializer "0" domelementtype "1" -domutils@^1.5.1: - version "1.6.2" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.6.2.tgz#1958cc0b4c9426e9ed367fb1c8e854891b0fa3ff" - dependencies: - dom-serializer "0" - domelementtype "1" - dot-prop@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" @@ -4769,14 +4758,10 @@ ip@^1.1.0, ip@^1.1.5: version "1.1.5" resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a" -ipaddr.js@1.5.2: +ipaddr.js@1.5.2, ipaddr.js@^1.5.2: version "1.5.2" resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0" -ipaddr.js@^1.5.2: - version "1.5.4" - resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.4.tgz#962263d9d26132956fc5c630b638a30d3cdffc14" - is-absolute-url@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6" @@ -6037,7 +6022,7 @@ minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4, minimatc dependencies: brace-expansion "^1.1.7" -minimist@0.0.8: +minimist@0.0.8, minimist@~0.0.1: version "0.0.8" resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d" @@ -6045,10 +6030,6 @@ minimist@1.2.0, minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2 version "1.2.0" resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" -minimist@~0.0.1: - version "0.0.10" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" - mixin-object@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e" @@ -7233,11 +7214,11 @@ public-encrypt@^4.0.0: parse-asn1 "^5.0.0" randombytes "^2.0.1" -punycode@1.3.2: +punycode@1.3.2, punycode@^1.2.4: version "1.3.2" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d" -punycode@^1.2.4, punycode@^1.4.1: +punycode@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e" @@ -7409,7 +7390,7 @@ react-docgen@^2.15.0: node-dir "^0.1.10" recast "^0.12.6" -react-dom@15: +react-dom@15, "react-dom@^15 || ^16": version "15.6.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730" dependencies: @@ -7418,15 +7399,6 @@ react-dom@15: object-assign "^4.1.0" prop-types "^15.5.10" -"react-dom@^15 || ^16": - version "16.0.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.0.0.tgz#9cc3079c3dcd70d4c6e01b84aab2a7e34c303f58" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - react-dropzone@4: version "4.2.1" resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-4.2.1.tgz#695e80bd0b065f1181e69f2d0f6d1d5cc72664c9" @@ -7663,7 +7635,7 @@ react-treebeard@^2.0.3: shallowequal "^0.2.2" velocity-react "^1.3.1" -react@15: +react@15, "react@^15 || ^16": version "15.6.2" resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72" dependencies: @@ -7673,15 +7645,6 @@ react@15: object-assign "^4.1.0" prop-types "^15.5.10" -"react@^15 || ^16": - version "16.0.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.0.0.tgz#ce7df8f1941b036f02b2cca9dbd0cb1f0e855e2d" - dependencies: - fbjs "^0.8.16" - loose-envify "^1.1.0" - object-assign "^4.1.1" - prop-types "^15.6.0" - reactcss@^1.2.0: version "1.2.3" resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd" @@ -8739,11 +8702,7 @@ sshpk@^1.7.0: jsbn "~0.1.0" tweetnacl "~0.14.0" -"statuses@>= 1.3.1 < 2": - version "1.4.0" - resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087" - -statuses@~1.3.1: +"statuses@>= 1.3.1 < 2", statuses@~1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e" @@ -9688,14 +9647,10 @@ word-wrap@^1.0.3: version "1.2.3" resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" -wordwrap@0.0.2: +wordwrap@0.0.2, wordwrap@~0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f" -wordwrap@~0.0.2: - version "0.0.3" - resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" - wordwrap@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"