@ubilabs/react-geosuggest - npm Package Compare versions

Comparing version 2.16.0 to 2.16.1

CHANGELOG.md

@@ -0,1 +1,9 @@
+### 2.16.1 (2023-10-02)
+
+
+#### Bug Fixes
+
+* **blur-callback:** call onBlur only if input loses focus (#510) ([8c804649](https://github.com/ubilabs/react-geosuggest/commit/8c804649727e3555a643e1193b0d1ea63142adf4))
+
+
 ## 2.16.0 (2023-08-08)
@@ -2,0 +10,0 @@

dist/react-geosuggest.js

@@ -774,4 +774,4 @@ var Geosuggest = (function (React) {
          */
-        SuggestItem.prototype.makeBold = function (element, key) {
-            return (React__namespace.createElement("b", { className: "geosuggest__item__matched-text", key: key }, element));
+        SuggestItem.prototype.makeBold = function (element) {
+            return React__namespace.createElement("b", { className: "geosuggest__item__matched-text" }, element);
         };
@@ -785,18 +785,21 @@ /**
             }
-            var start = suggest.matchedSubstrings.offset;
-            var length = suggest.matchedSubstrings.length;
-            var end = start + length;
-            var boldPart = this.makeBold(suggest.label.substring(start, end), suggest.label);
-            var pre = '';
-            var post = '';
-            if (start > 0) {
-                pre = suggest.label.slice(0, start);
+            var parts = [];
+            var previousEnd = 0;
+            for (var _i = 0, _a = suggest.matchedSubstrings; _i < _a.length; _i++) {
+                var _b = _a[_i], start = _b.offset, length_1 = _b.length;
+                // Add non-matching substring before and between matches
+                if (start > previousEnd) {
+                    parts.push(suggest.label.substring(previousEnd, start));
+                }
+                // Add matching substring as bold text
+                var end = start + length_1;
+                var match = this.makeBold(suggest.label.substring(start, end));
+                parts.push(match);
+                previousEnd = end;
             }
-            if (end < suggest.label.length) {
-                post = suggest.label.slice(end);
+            // Add non-matching substring after matches
+            if (previousEnd < suggest.label.length) {
+                parts.push(suggest.label.substring(previousEnd));
             }
-            return (React__namespace.createElement("span", null,
-                pre,
-                boldPart,
-                post));
+            return React__namespace.createElement("span", null, parts);
         };
@@ -1057,2 +1060,5 @@ /**
             }
+            if (this.props.onBlur) {
+                this.props.onBlur(this.state.userInput);
+            }
         };
@@ -1184,6 +1190,8 @@ GeoSuggest.prototype.onNext = function () {
                         fixturesSearched++;
-                        suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: {
-                                length: userInput.length,
-                                offset: fixture.label.indexOf(userInput)
-                            }, placeId: fixture.placeId || fixture.label }));
+                        suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: [
+                                {
+                                    length: userInput.length,
+                                    offset: fixture.label.search(regex)
+                                }
+                            ], placeId: fixture.placeId || fixture.label }));
                     }
@@ -1200,3 +1208,3 @@ });
                             : '',
-                        matchedSubstrings: suggest.matched_substrings[0],
+                        matchedSubstrings: suggest.matched_substrings,
                         placeId: suggest.place_id
@@ -1240,5 +1248,2 @@ });
             var _this = this;
-            if (this.props.onBlur) {
-                this.props.onBlur(this.state.userInput);
-            }
             this.timer = window.setTimeout(function () {
@@ -1245,0 +1250,0 @@ _this.setState({

dist/react-geosuggest.min.js

@@ -6,2 +6,2 @@ var Geosuggest=function(t){"use strict";function e(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(s){if("default"!==s){var o=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(e,s,o.get?o:{enumerable:!0,get:function(){return t[s]}})}})),e.default=t,Object.freeze(e)}var s=e(t),o=function(t,e){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var s in e)Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s])},o(t,e)};function n(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function s(){this.constructor=t}o(t,e),t.prototype=null===e?Object.create(e):(s.prototype=e.prototype,new s)}var i=function(){return i=Object.assign||function(t){for(var e,s=1,o=arguments.length;s<o;s++)for(var n in e=arguments[s])Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n]);return t},i.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var r="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function u(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var p,a={exports:{}};
     	http://jedwatson.github.io/classnames
-    */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var i=typeof n;if("string"===i||"number"===i)s.push(n);else if(Array.isArray(n)){if(n.length){var r=e.apply(null,n);r&&s.push(r)}}else if("object"===i){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){s.push(n.toString());continue}for(var u in n)t.call(n,u)&&n[u]&&s.push(u)}}}return s.join(" ")}p.exports?(e.default=e,p.exports=e):window.classNames=e}();var l=u(a.exports),g=NaN,c="[object Symbol]",h=/^\s+|\s+$/g,d=/^[-+]0x[0-9a-f]+$/i,f=/^0b[01]+$/i,S=/^0o[0-7]+$/i,y=parseInt,v="object"==typeof r&&r&&r.Object===Object&&r,m="object"==typeof self&&self&&self.Object===Object&&self,b=v||m||Function("return this")(),I=Object.prototype.toString,w=Math.max,C=Math.min,N=function(){return b.Date.now()};function x(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function M(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&I.call(t)==c}(t))return g;if(x(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=x(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(h,"");var s=f.test(t);return s||S.test(t)?y(t.slice(2),s?2:8):d.test(t)?g:+t}var O=function(t,e,s){var o,n,i,r,u,p,a=0,l=!1,g=!1,c=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function h(e){var s=o,i=n;return o=n=void 0,a=e,r=t.apply(i,s)}function d(t){var s=t-p;return void 0===p||s>=e||s<0||g&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return g?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function y(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),l?h(t):r}(p);if(g)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(l=!!s.leading,i=(g="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),y.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},y.flush=function(){return void 0===u?r:S(N())},y},T=u(O),D={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},E=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function _(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(E.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=_(this.props),o=l("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:this.props.id},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),k=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t,e){return s.createElement("b",{className:"geosuggest__item__matched-text",key:e},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;var o=e.matchedSubstrings.offset,n=o+e.matchedSubstrings.length,i=this.makeBold(e.label.substring(o,n),e.label),r="",u="";return o>0&&(r=e.label.slice(0,o)),n<e.label.length&&(u=e.label.slice(n)),s.createElement("span",null,r,i,u)},e.prototype.componentDidUpdate=function(t){!t.isActive&&this.props.isActive&&this.scrollIfNeeded()},e.prototype.scrollIfNeeded=function(){var t=this.ref,e=t&&t.parentElement;if(t&&e){var s=t.offsetTop-e.offsetTop<e.scrollTop,o=t.offsetTop-e.offsetTop+t.clientHeight>e.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=l("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),A=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=l("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(k,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests()},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s<this.props.minLength)this.updateSuggests();else{var o=this.props,n=o.location,i=o.radius,r=o.bounds,u=o.types,p=o.country;n&&(e.location=n),i&&(e.radius=Number(this.props.radius)),r&&(e.bounds=r),u&&(e.types=u),p&&(e.componentRestrictions={country:p}),this.setState({isLoading:!0},(function(){t.autocompleteService?t.autocompleteService.getPlacePredictions(e,(function(e){t.setState({isLoading:!1}),t.updateSuggests(e||[],(function(){t.props.autoActivateFirstSuggest&&!t.state.activeSuggest&&t.activateSuggest("next")}))})):t.setState({isLoading:!1})}))}}else this.updateSuggests()},e.prototype.updateSuggests=function(t,e){var s=this;void 0===t&&(t=[]),void 0===e&&(e=function(){});var o,n=[],r=this.state.userInput,u=this.props,p=u.skipSuggest,a=u.maxFixtures,l=u.fixtures,g=new RegExp(r.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&"),"gim"),c=0;l&&l.forEach((function(t){a&&c>=a||p&&!p(t)&&t.label.match(g)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:{length:r.length,offset:t.label.indexOf(r)},placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings[0],placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.props.onBlur&&this.props.onBlur(this.state.userInput),this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=_(this.props),o=l("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(A,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:this.props.id},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=D,e}(s.Component)}(React);
+    */p=a,function(){var t={}.hasOwnProperty;function e(){for(var s=[],o=0;o<arguments.length;o++){var n=arguments[o];if(n){var i=typeof n;if("string"===i||"number"===i)s.push(n);else if(Array.isArray(n)){if(n.length){var r=e.apply(null,n);r&&s.push(r)}}else if("object"===i){if(n.toString!==Object.prototype.toString&&!n.toString.toString().includes("[native code]")){s.push(n.toString());continue}for(var u in n)t.call(n,u)&&n[u]&&s.push(u)}}}return s.join(" ")}p.exports?(e.default=e,p.exports=e):window.classNames=e}();var g=u(a.exports),l=NaN,c="[object Symbol]",h=/^\s+|\s+$/g,d=/^[-+]0x[0-9a-f]+$/i,f=/^0b[01]+$/i,S=/^0o[0-7]+$/i,v=parseInt,y="object"==typeof r&&r&&r.Object===Object&&r,m="object"==typeof self&&self&&self.Object===Object&&self,b=y||m||Function("return this")(),I=Object.prototype.toString,w=Math.max,C=Math.min,N=function(){return b.Date.now()};function x(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function M(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&I.call(t)==c}(t))return l;if(x(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=x(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(h,"");var s=f.test(t);return s||S.test(t)?v(t.slice(2),s?2:8):d.test(t)?l:+t}var O=function(t,e,s){var o,n,i,r,u,p,a=0,g=!1,l=!1,c=!0;if("function"!=typeof t)throw new TypeError("Expected a function");function h(e){var s=o,i=n;return o=n=void 0,a=e,r=t.apply(i,s)}function d(t){var s=t-p;return void 0===p||s>=e||s<0||l&&t-a>=i}function f(){var t=N();if(d(t))return S(t);u=setTimeout(f,function(t){var s=e-(t-p);return l?C(s,i-(t-a)):s}(t))}function S(t){return u=void 0,c&&o?h(t):(o=n=void 0,r)}function v(){var t=N(),s=d(t);if(o=arguments,n=this,p=t,s){if(void 0===u)return function(t){return a=t,u=setTimeout(f,e),g?h(t):r}(p);if(l)return u=setTimeout(f,e),h(p)}return void 0===u&&(u=setTimeout(f,e)),r}return e=M(e)||0,x(s)&&(g=!!s.leading,i=(l="maxWait"in s)?w(M(s.maxWait)||0,e):i,c="trailing"in s?!!s.trailing:c),v.cancel=function(){void 0!==u&&clearTimeout(u),a=0,o=p=n=u=void 0},v.flush=function(){return void 0===u?r:S(N())},v},T=u(O),D={autoActivateFirstSuggest:!1,disabled:!1,fixtures:[],getSuggestLabel:function(t){return t.description},highlightMatch:!0,ignoreEnter:!1,ignoreTab:!1,initialValue:"",maxFixtures:10,minLength:1,onKeyDown:function(){},onKeyPress:function(){},placeholder:"Search places",queryDelay:250,skipSuggest:function(){return!1},style:{},inputType:"text"},E=["autoCapitalize","autoComplete","autoCorrect","autoFocus","disabled","form","formAction","formEncType","formMethod","formNoValidate","formTarget","height","inputMode","maxLength","name","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onMouseDown","onMouseEnter","onMouseLeave","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","pattern","placeholder","readOnly","required","size","spellCheck","tabIndex","title","aria-atomic","aria-busy","aria-controls","aria-current","aria-describedby","aria-details","aria-disabled","aria-dropeffect","aria-errormessage","aria-flowto","aria-grabbed","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-relevant","aria-roledescription","aria-activedescendant","aria-autocomplete","aria-multiline","aria-placeholder","aria-readonly","aria-required"];function _(t){var e={};return Object.keys(t).forEach((function(s){var o=s.startsWith("data-");(E.includes(s)||o)&&(e[s]=t[s])})),e}var P=function(t){function e(e){var s=t.call(this,e)||this;return s.input=null,s.onChange=s.onChange.bind(s),s.onInputKeyDown=s.onInputKeyDown.bind(s),s}return n(e,t),e.prototype.onChange=function(){this.input&&this.props.onChange(this.input.value)},e.prototype.onInputKeyDown=function(t){switch(this.props.onKeyDown&&this.props.onKeyDown(t),t.which){case 40:t.shiftKey||(t.preventDefault(),this.props.onNext());break;case 38:t.shiftKey||(t.preventDefault(),this.props.onPrev());break;case 13:this.props.doNotSubmitOnEnter&&t.preventDefault(),this.props.ignoreEnter||this.props.onSelect();break;case 9:this.props.ignoreTab||this.props.onSelect();break;case 27:this.props.onEscape()}},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest__input",this.props.className),n=this.props.label&&this.props.id;return e.tabIndex||(e.tabIndex=0),s.createElement(s.Fragment,null,n&&s.createElement("label",{className:"geosuggest__label",htmlFor:this.props.id},this.props.label),s.createElement("input",i({className:o,id:"geosuggest__input".concat(this.props.id?"--".concat(this.props.id):""),ref:function(e){return t.input=e},type:this.props.inputType},e,{value:this.props.value,style:this.props.style,onKeyDown:this.onInputKeyDown,onChange:this.onChange,onKeyPress:this.props.onKeyPress,onFocus:this.props.onFocus,onBlur:this.props.onBlur,role:"combobox","aria-expanded":!this.props.isSuggestsHidden,"aria-activedescendant":this.props.activeSuggest?this.props.activeSuggest.placeId:void 0,"aria-owns":this.props.listId})))},e.defaultProps={activeSuggest:null,autoComplete:"off",className:"",isSuggestsHidden:!0,listId:"",inputType:"text",onBlur:function(){},onChange:function(){},onEscape:function(){},onFocus:function(){},onKeyDown:function(){},onKeyPress:function(){},onNext:function(){},onPrev:function(){},onSelect:function(){},value:""},e}(s.PureComponent),A=function(t){function e(e){var s=t.call(this,e)||this;return s.ref=null,s.onClick=s.onClick.bind(s),s}return n(e,t),e.prototype.makeBold=function(t){return s.createElement("b",{className:"geosuggest__item__matched-text"},t)},e.prototype.formatMatchedText=function(t,e){if(!t||!e.matchedSubstrings)return e.label;for(var o=[],n=0,i=0,r=e.matchedSubstrings;i<r.length;i++){var u=r[i],p=u.offset,a=u.length;p>n&&o.push(e.label.substring(n,p));var g=p+a,l=this.makeBold(e.label.substring(p,g));o.push(l),n=g}return n<e.label.length&&o.push(e.label.substring(n)),s.createElement("span",null,o)},e.prototype.componentDidUpdate=function(t){!t.isActive&&this.props.isActive&&this.scrollIfNeeded()},e.prototype.scrollIfNeeded=function(){var t=this.ref,e=t&&t.parentElement;if(t&&e){var s=t.offsetTop-e.offsetTop<e.scrollTop,o=t.offsetTop-e.offsetTop+t.clientHeight>e.scrollTop+e.clientHeight;(s||o)&&(e.scrollTop=t.offsetTop-e.offsetTop-e.clientHeight/2+t.clientHeight/2)}},e.prototype.onClick=function(t){t.preventDefault(),this.props.onSelect(this.props.suggest)},e.prototype.render=function(){var t,e=this,o=this.props.suggest,n=g("geosuggest__item",this.props.className,this.props.suggestItemClassName,{"geosuggest__item--active":this.props.isActive},((t={})[this.props.activeClassName||""]=this.props.activeClassName?this.props.isActive:null,t)),i=o.label;return this.props.renderSuggestItem?i=this.props.renderSuggestItem(o,this.props.userInput):this.props.isHighlightMatch&&(i=this.formatMatchedText(this.props.userInput,o)),s.createElement("li",{className:n,ref:function(t){return e.ref=t},style:this.props.style,onMouseDown:this.props.onMouseDown,onMouseOut:this.props.onMouseOut,onClick:this.onClick,role:"option","aria-selected":this.props.isActive,id:o.placeId},i)},e}(s.PureComponent),k=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return n(e,t),e.prototype.isHidden=function(){return this.props.isHidden||0===this.props.suggests.length},e.prototype.componentDidUpdate=function(t){t.suggests!==this.props.suggests&&0===this.props.suggests.length&&this.props.onSuggestNoResults()},e.prototype.render=function(){var t,e=this,o=g("geosuggest__suggests",this.props.suggestsClassName,{"geosuggest__suggests--hidden":this.isHidden()},((t={})[this.props.hiddenClassName||""]=this.props.hiddenClassName?this.isHidden():null,t));return s.createElement("ul",{className:o,style:this.props.style,role:"listbox","aria-label":this.props.listLabel,id:this.props.listId},this.props.suggests.map((function(t){var o=e.props.activeSuggest&&t.placeId===e.props.activeSuggest.placeId||!1;return s.createElement(A,{key:t.placeId,className:t.className||"",userInput:e.props.userInput,isHighlightMatch:e.props.isHighlightMatch,suggest:t,style:e.props.suggestItemStyle,suggestItemClassName:e.props.suggestItemClassName,isActive:o,activeClassName:e.props.suggestItemActiveClassName,onMouseDown:e.props.onSuggestMouseDown,onMouseOut:e.props.onSuggestMouseOut,onSelect:e.props.onSuggestSelect,renderSuggestItem:e.props.renderSuggestItem})})))},e}(s.PureComponent);return function(t){function e(e){var s=t.call(this,e)||this;return s.googleMaps=null,s.autocompleteService=null,s.placesService=null,s.sessionToken=void 0,s.geocoder=null,s.input=null,s.state={activeSuggest:null,ignoreBlur:!1,isLoading:!1,isSuggestsHidden:!0,suggests:[],userInput:e.initialValue||""},s.onInputChange=s.onInputChange.bind(s),s.onAfterInputChange=s.onAfterInputChange.bind(s),s.onInputFocus=s.onInputFocus.bind(s),s.onInputBlur=s.onInputBlur.bind(s),s.onNext=s.onNext.bind(s),s.onPrev=s.onPrev.bind(s),s.onSelect=s.onSelect.bind(s),s.onSuggestMouseDown=s.onSuggestMouseDown.bind(s),s.onSuggestMouseOut=s.onSuggestMouseOut.bind(s),s.onSuggestNoResults=s.onSuggestNoResults.bind(s),s.hideSuggests=s.hideSuggests.bind(s),s.selectSuggest=s.selectSuggest.bind(s),s.listId="geosuggest__list".concat(e.id?"--".concat(e.id):""),s.listLabel=e.label?"".concat(e.label," options"):"options",e.queryDelay&&(s.onAfterInputChange=T(s.onAfterInputChange,e.queryDelay)),s}return n(e,t),e.prototype.componentDidUpdate=function(t){t.initialValue!==this.props.initialValue&&this.setState({userInput:this.props.initialValue||""}),JSON.stringify(t.fixtures)!==JSON.stringify(this.props.fixtures)&&this.searchSuggests()},e.prototype.componentDidMount=function(){if("undefined"!=typeof window){var t=this.props.googleMaps||window.google&&window.google.maps||this.googleMaps;t?(this.googleMaps=t,this.autocompleteService=new t.places.AutocompleteService,this.placesService=new t.places.PlacesService(document.createElement("div")),this.sessionToken=new t.places.AutocompleteSessionToken,this.geocoder=new t.Geocoder):console&&console.error("Google maps API was not found in the page.")}},e.prototype.componentWillUnmount=function(){clearTimeout(this.timer)},e.prototype.onInputChange=function(t){t||this.props.onSuggestSelect&&this.props.onSuggestSelect(),this.setState({userInput:t},this.onAfterInputChange)},e.prototype.onAfterInputChange=function(){this.showSuggests(),this.props.onChange&&this.props.onChange(this.state.userInput)},e.prototype.onInputFocus=function(){this.props.onFocus&&this.props.onFocus(),this.showSuggests()},e.prototype.onInputBlur=function(){this.state.ignoreBlur||this.hideSuggests(),this.props.onBlur&&this.props.onBlur(this.state.userInput)},e.prototype.onNext=function(){this.activateSuggest("next")},e.prototype.onPrev=function(){this.activateSuggest("prev")},e.prototype.onSelect=function(){this.selectSuggest(this.state.activeSuggest)},e.prototype.onSuggestMouseDown=function(){this.setState({ignoreBlur:!0})},e.prototype.onSuggestMouseOut=function(){this.setState({ignoreBlur:!1})},e.prototype.onSuggestNoResults=function(){this.props.onSuggestNoResults&&this.props.onSuggestNoResults(this.state.userInput)},e.prototype.focus=function(){this.input&&this.input.focus()},e.prototype.blur=function(){this.input&&this.input.blur()},e.prototype.update=function(t){this.setState({userInput:t}),this.props.onChange&&this.props.onChange(t)},e.prototype.clear=function(){this.setState({userInput:""},this.hideSuggests)},e.prototype.searchSuggests=function(){var t=this;if(this.state.userInput){var e={input:this.state.userInput,sessionToken:this.sessionToken},s=this.state.userInput.length;if(this.props.minLength&&s<this.props.minLength)this.updateSuggests();else{var o=this.props,n=o.location,i=o.radius,r=o.bounds,u=o.types,p=o.country;n&&(e.location=n),i&&(e.radius=Number(this.props.radius)),r&&(e.bounds=r),u&&(e.types=u),p&&(e.componentRestrictions={country:p}),this.setState({isLoading:!0},(function(){t.autocompleteService?t.autocompleteService.getPlacePredictions(e,(function(e){t.setState({isLoading:!1}),t.updateSuggests(e||[],(function(){t.props.autoActivateFirstSuggest&&!t.state.activeSuggest&&t.activateSuggest("next")}))})):t.setState({isLoading:!1})}))}}else this.updateSuggests()},e.prototype.updateSuggests=function(t,e){var s=this;void 0===t&&(t=[]),void 0===e&&(e=function(){});var o,n=[],r=this.state.userInput,u=this.props,p=u.skipSuggest,a=u.maxFixtures,g=u.fixtures,l=new RegExp(r.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&"),"gim"),c=0;g&&g.forEach((function(t){a&&c>=a||p&&!p(t)&&t.label.match(l)&&(c++,n.push(i(i({},t),{isFixture:!0,matchedSubstrings:[{length:r.length,offset:t.label.search(l)}],placeId:t.placeId||t.label})))})),t.forEach((function(t){p&&!p(t)&&n.push({description:t.description,isFixture:!1,label:s.props.getSuggestLabel?s.props.getSuggestLabel(t):"",matchedSubstrings:t.matched_substrings,placeId:t.place_id})})),o=this.updateActiveSuggest(n),this.props.onUpdateSuggests&&this.props.onUpdateSuggests(n,o),this.setState({suggests:n,activeSuggest:o},e)},e.prototype.updateActiveSuggest=function(t){void 0===t&&(t=[]);var e=this.state.activeSuggest;if(e){var s=t.filter((function(t){return e&&e.placeId===t.placeId&&e.isFixture===t.isFixture}))[0];e=s||null}return e},e.prototype.showSuggests=function(){this.searchSuggests(),this.setState({isSuggestsHidden:!1})},e.prototype.hideSuggests=function(){var t=this;this.timer=window.setTimeout((function(){t.setState({activeSuggest:null,isSuggestsHidden:!0})}),100)},e.prototype.activateSuggest=function(t){if(this.state.isSuggestsHidden)this.showSuggests();else{for(var e=this.state.suggests.length-1,s="next"===t,o=null,n=0,i=0;i<=e;i++)this.state.suggests[i]===this.state.activeSuggest&&(n=s?i+1:i-1);this.state.activeSuggest||(n=s?0:e),n>=0&&n<=e&&(o=this.state.suggests[n]),this.props.onActivateSuggest&&this.props.onActivateSuggest(o),this.setState({activeSuggest:o})}},e.prototype.selectSuggest=function(t){var e=t||{isFixture:!0,label:this.state.userInput,placeId:this.state.userInput};if(!t&&this.props.autoActivateFirstSuggest&&this.state.suggests.length>0&&(e=this.state.suggests[0]),this.setState({isSuggestsHidden:!0,userInput:"object"!=typeof e.label?e.label:e.description||""}),e.location)return this.setState({ignoreBlur:!1}),void(this.props.onSuggestSelect&&this.props.onSuggestSelect(e));this.geocodeSuggest(e)},e.prototype.geocodeSuggest=function(t){var e=this;if(this.geocoder)if(t.placeId&&!t.isFixture&&this.placesService){var s={placeId:t.placeId,sessionToken:this.sessionToken};this.props.placeDetailFields&&(s.fields=this.props.placeDetailFields,s.fields.unshift("geometry")),this.placesService.getDetails(s,(function(s,o){if(o===e.googleMaps.places.PlacesServiceStatus.OK){var n=s,r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.sessionToken=new google.maps.places.AutocompleteSessionToken,e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}else{s={address:t.label,bounds:this.props.bounds,componentRestrictions:this.props.country?{country:this.props.country}:void 0,location:this.props.location};this.geocoder.geocode(s,(function(s,o){if(o===e.googleMaps.GeocoderStatus.OK){var n=s[0],r=n.geometry&&n.geometry.location,u=i(i({},t),{gmaps:n,location:{lat:r.lat(),lng:r.lng()}});e.props.onSuggestSelect&&e.props.onSuggestSelect(u)}}))}},e.prototype.render=function(){var t=this,e=_(this.props),o=g("geosuggest",this.props.className,{"geosuggest--loading":this.state.isLoading}),n=s.createElement(P,i({className:this.props.inputClassName,ref:function(e){return t.input=e},value:this.state.userInput,doNotSubmitOnEnter:!this.state.isSuggestsHidden,ignoreTab:this.props.ignoreTab,ignoreEnter:this.props.ignoreEnter,style:this.props.style&&this.props.style.input,onChange:this.onInputChange,onFocus:this.onInputFocus,onBlur:this.onInputBlur,onKeyDown:this.props.onKeyDown,onKeyPress:this.props.onKeyPress,inputType:this.props.inputType,onNext:this.onNext,onPrev:this.onPrev,onSelect:this.onSelect,onEscape:this.hideSuggests,isSuggestsHidden:this.state.isSuggestsHidden,activeSuggest:this.state.activeSuggest,label:this.props.label,id:this.props.id,listId:this.listId},e)),r=s.createElement(k,{isHidden:this.state.isSuggestsHidden,style:this.props.style&&this.props.style.suggests,suggestItemStyle:this.props.style&&this.props.style.suggestItem,userInput:this.state.userInput,isHighlightMatch:Boolean(this.props.highlightMatch),suggestsClassName:this.props.suggestsClassName,suggestItemClassName:this.props.suggestItemClassName,suggests:this.state.suggests,hiddenClassName:this.props.suggestsHiddenClassName,suggestItemActiveClassName:this.props.suggestItemActiveClassName,activeSuggest:this.state.activeSuggest,onSuggestNoResults:this.onSuggestNoResults,onSuggestMouseDown:this.onSuggestMouseDown,onSuggestMouseOut:this.onSuggestMouseOut,onSuggestSelect:this.selectSuggest,renderSuggestItem:this.props.renderSuggestItem,listId:this.listId,listLabel:this.listLabel});return s.createElement("div",{className:o,id:this.props.id},s.createElement("div",{className:"geosuggest__input-wrapper"},n),s.createElement("div",{className:"geosuggest__suggests-wrapper"},r))},e.defaultProps=D,e}(s.Component)}(React);

module/Geosuggest.d.ts

@@ -20,3 +20,3 @@ /// <reference types="googlemaps" />
         length: number;
-    };
+    }[];
     readonly className?: string;
@@ -23,0 +23,0 @@ }

module/Geosuggest.esm.js

@@ -308,4 +308,4 @@ import * as React from 'react';
      */
-    SuggestItem.prototype.makeBold = function (element, key) {
-        return (React.createElement("b", { className: "geosuggest__item__matched-text", key: key }, element));
+    SuggestItem.prototype.makeBold = function (element) {
+        return React.createElement("b", { className: "geosuggest__item__matched-text" }, element);
     };
@@ -319,18 +319,21 @@ /**
         }
-        var start = suggest.matchedSubstrings.offset;
-        var length = suggest.matchedSubstrings.length;
-        var end = start + length;
-        var boldPart = this.makeBold(suggest.label.substring(start, end), suggest.label);
-        var pre = '';
-        var post = '';
-        if (start > 0) {
-            pre = suggest.label.slice(0, start);
+        var parts = [];
+        var previousEnd = 0;
+        for (var _i = 0, _a = suggest.matchedSubstrings; _i < _a.length; _i++) {
+            var _b = _a[_i], start = _b.offset, length_1 = _b.length;
+            // Add non-matching substring before and between matches
+            if (start > previousEnd) {
+                parts.push(suggest.label.substring(previousEnd, start));
+            }
+            // Add matching substring as bold text
+            var end = start + length_1;
+            var match = this.makeBold(suggest.label.substring(start, end));
+            parts.push(match);
+            previousEnd = end;
         }
-        if (end < suggest.label.length) {
-            post = suggest.label.slice(end);
+        // Add non-matching substring after matches
+        if (previousEnd < suggest.label.length) {
+            parts.push(suggest.label.substring(previousEnd));
         }
-        return (React.createElement("span", null,
-            pre,
-            boldPart,
-            post));
+        return React.createElement("span", null, parts);
     };
@@ -591,2 +594,5 @@ /**
         }
+        if (this.props.onBlur) {
+            this.props.onBlur(this.state.userInput);
+        }
     };
@@ -718,6 +724,8 @@ GeoSuggest.prototype.onNext = function () {
                     fixturesSearched++;
-                    suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: {
-                            length: userInput.length,
-                            offset: fixture.label.indexOf(userInput)
-                        }, placeId: fixture.placeId || fixture.label }));
+                    suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: [
+                            {
+                                length: userInput.length,
+                                offset: fixture.label.search(regex)
+                            }
+                        ], placeId: fixture.placeId || fixture.label }));
                 }
@@ -734,3 +742,3 @@ });
                         : '',
-                    matchedSubstrings: suggest.matched_substrings[0],
+                    matchedSubstrings: suggest.matched_substrings,
                     placeId: suggest.place_id
@@ -774,5 +782,2 @@ });
         var _this = this;
-        if (this.props.onBlur) {
-            this.props.onBlur(this.state.userInput);
-        }
         this.timer = window.setTimeout(function () {
@@ -779,0 +784,0 @@ _this.setState({

module/Geosuggest.umd.js

@@ -329,4 +329,4 @@ (function (global, factory) {
          */
-        SuggestItem.prototype.makeBold = function (element, key) {
-            return (React__namespace.createElement("b", { className: "geosuggest__item__matched-text", key: key }, element));
+        SuggestItem.prototype.makeBold = function (element) {
+            return React__namespace.createElement("b", { className: "geosuggest__item__matched-text" }, element);
         };
@@ -340,18 +340,21 @@ /**
             }
-            var start = suggest.matchedSubstrings.offset;
-            var length = suggest.matchedSubstrings.length;
-            var end = start + length;
-            var boldPart = this.makeBold(suggest.label.substring(start, end), suggest.label);
-            var pre = '';
-            var post = '';
-            if (start > 0) {
-                pre = suggest.label.slice(0, start);
+            var parts = [];
+            var previousEnd = 0;
+            for (var _i = 0, _a = suggest.matchedSubstrings; _i < _a.length; _i++) {
+                var _b = _a[_i], start = _b.offset, length_1 = _b.length;
+                // Add non-matching substring before and between matches
+                if (start > previousEnd) {
+                    parts.push(suggest.label.substring(previousEnd, start));
+                }
+                // Add matching substring as bold text
+                var end = start + length_1;
+                var match = this.makeBold(suggest.label.substring(start, end));
+                parts.push(match);
+                previousEnd = end;
             }
-            if (end < suggest.label.length) {
-                post = suggest.label.slice(end);
+            // Add non-matching substring after matches
+            if (previousEnd < suggest.label.length) {
+                parts.push(suggest.label.substring(previousEnd));
             }
-            return (React__namespace.createElement("span", null,
-                pre,
-                boldPart,
-                post));
+            return React__namespace.createElement("span", null, parts);
         };
@@ -612,2 +615,5 @@ /**
             }
+            if (this.props.onBlur) {
+                this.props.onBlur(this.state.userInput);
+            }
         };
@@ -739,6 +745,8 @@ GeoSuggest.prototype.onNext = function () {
                         fixturesSearched++;
-                        suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: {
-                                length: userInput.length,
-                                offset: fixture.label.indexOf(userInput)
-                            }, placeId: fixture.placeId || fixture.label }));
+                        suggests.push(__assign(__assign({}, fixture), { isFixture: true, matchedSubstrings: [
+                                {
+                                    length: userInput.length,
+                                    offset: fixture.label.search(regex)
+                                }
+                            ], placeId: fixture.placeId || fixture.label }));
                     }
@@ -755,3 +763,3 @@ });
                             : '',
-                        matchedSubstrings: suggest.matched_substrings[0],
+                        matchedSubstrings: suggest.matched_substrings,
                         placeId: suggest.place_id
@@ -795,5 +803,2 @@ });
             var _this = this;
-            if (this.props.onBlur) {
-                this.props.onBlur(this.state.userInput);
-            }
             this.timer = window.setTimeout(function () {
@@ -800,0 +805,0 @@ _this.setState({

package.json

 {
   "name": "@ubilabs/react-geosuggest",
-  "version": "2.16.0",
+  "version": "2.16.1",
   "description": "A React autosuggest for the Google Maps Places API.",
@@ -5,0 +5,0 @@ "main": "module/Geosuggest.umd.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206005

increased by0.65%

Lines of code

3797

increased by0.4%

No dependency changes