SearchBox: allow focusing on startup via focusOnStartup config prop

Author: manisandro

components/SearchBox.jsx

@@ -63,6 +63,7 @@ class SearchBox extends React.Component {
         replacePlaceholderLayer: PropTypes.func,
         searchOptions: PropTypes.shape({
             allowSearchFilters: PropTypes.bool,
+            focusOnStartup: PropTypes.bool,
             hideResultLabels: PropTypes.bool,
             highlightStyle: PropTypes.object,
             minScaleDenom: PropTypes.number,
@@ -638,7 +639,7 @@ class SearchBox extends React.Component {
                             onClick={() => this.setState({resultsVisible: true})}
                             onFocus={this.onFocus}
                             onKeyDown={this.onKeyDown}
-                            placeholder={placeholder} ref={el => { this.searchBox = el; }}
+                            placeholder={placeholder} ref={this.setSearchBoxRef}
                             role="input" type="text" value={this.state.searchText} />
                         {this.state.pendingSearches.length > 0 ? (<Spinner role="suffix" />) : (<Icon icon="clear" onClick={this.clear} role="suffix" />)}
                     </InputContainer>
@@ -662,6 +663,12 @@ class SearchBox extends React.Component {
             )
         ];
     }
+    setSearchBoxRef = (el) => {
+        this.searchBox = el;
+        if (this.props.searchOptions.focusOnStartup) {
+            el.focus();
+        }
+    };
     toggleFilterOptions = (visible) => {
         this.setState({filterOptionsVisible: visible});
     };

doc/plugins.md

@@ -998,7 +998,7 @@ Top bar, containing the logo, searchbar, task buttons and app menu.
 | logoUrl | `string` | The hyperlink to open when the logo is clicked. | `undefined` |
 | menuItems | `array` | The menu items. Refer to the corresponding chapter of the viewer documentation and the sample config.json. | `[]` |
 | registerTaskSearchProvider | `bool` | Whether to register a search provider which allows searching menu tasks through the global search field. | `undefined` |
-| searchOptions | `{`<br />`  allowSearchFilters: bool,`<br />`  hideResultLabels: bool,`<br />`  highlightStyle: {`<br />`  strokeColor: array,`<br />`  strokeWidth: number,`<br />`  strokeDash: array,`<br />`  fillColor: array,`<br />`},`<br />`  minScaleDenom: number,`<br />`  resultLimit: number,`<br />`  sectionsDefaultCollapsed: bool,`<br />`  showHighlightMarker: bool,`<br />`  showLayerAfterChangeTheme: bool,`<br />`  showLayerResultsBeforePlaces: bool,`<br />`  showResultInSearchText: bool,`<br />`  zoomToLayers: bool,`<br />`}` | Options passed down to the search component. | `{`<br />`    showHighlightMarker: true,`<br />`    showResultInSearchText: true,`<br />`    minScaleDenom: 1000`<br />`}` |
+| searchOptions | `{`<br />`  allowSearchFilters: bool,`<br />`  focusOnStartup: bool,`<br />`  hideResultLabels: bool,`<br />`  highlightStyle: {`<br />`  strokeColor: array,`<br />`  strokeWidth: number,`<br />`  strokeDash: array,`<br />`  fillColor: array,`<br />`},`<br />`  minScaleDenom: number,`<br />`  resultLimit: number,`<br />`  sectionsDefaultCollapsed: bool,`<br />`  showHighlightMarker: bool,`<br />`  showLayerAfterChangeTheme: bool,`<br />`  showLayerResultsBeforePlaces: bool,`<br />`  showResultInSearchText: bool,`<br />`  zoomToLayers: bool,`<br />`}` | Options passed down to the search component. | `{`<br />`    showHighlightMarker: true,`<br />`    showResultInSearchText: true,`<br />`    minScaleDenom: 1000`<br />`}` |
 | toolbarItems | `array` | The toolbar. Refer to the corresponding chapter of the viewer documentation and the sample config.json. | `[]` |
 | toolbarItemsShortcutPrefix | `string` | The keyboard shortcut prefix for triggering toolbar tasks. I.e. alt+shift. The task are then triggered by <prefix>+{1,2,3,...} for the 1st, 2nd, 3rd... toolbar icon. | `undefined` |
 

plugins/TopBar.jsx

@@ -60,6 +60,8 @@ class TopBar extends React.Component {
         searchOptions: PropTypes.shape({
             /** Whether to show the search filter widget. */
             allowSearchFilters: PropTypes.bool,
+            /** Whether to focus the search field on startup. */
+            focusOnStartup: PropTypes.bool,
             /** Whether to hide the result labels on the map. */
             hideResultLabels: PropTypes.bool,
             /** The style used for highlighting search result geometries. */