The material-ui-search-bar component should have a disabled prop that is fed into the underlying autocomplete.

Name Type Default Description
disabled bool False disables the underlying autocomplete component.

On the version 0.3.0, I'd like to test the default example without any data sources :

<Col md={12}>
    <SearchBar
        onChange={() => console.log('value')}
        onRequestSearch={() => console.log('onRequestSearch')}
        style={{
            margin: '0 auto'
        }}
    />
</Col>

And with this basic example, I still get this

Could something be interfering ?

I want to use Chinese in my component but I cant find it ,no placeholder?

Hello, I have this error message :

Failed to compile
./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/IconButton' in 'D:\Redouane\WebstormProjects\soccer-factory\node_modules\material-ui-search-bar\lib\components\SearchBar'

I tried everything
npm i --save material-ui-search-bar
npm i --save material-ui-search-bar@beta
npm i --save [email protected]

What did I do wrong ?

The context muiTheme is marked as required in Paper, but its value is undefined.
in Paper (created by SearchBar)

what cause this error ? i allready wrapped my components with muiThemeProvider everything is fine .

i have assigned a function to onCancelSearch prop which resets the results when cancelled. Its working fine but I am getting this warning:

Warning: Unknown event handler property onCancelSearch. It will be ignored.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by SearchBar)
in div (created by SearchBar)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SearchBar)
in SearchBar (created by WithStyles(SearchBar))
in WithStyles(SearchBar) (at Stores.js:558)
in div (at Stores.js:532)
in Stores (created by Route)
in Route (at Main.js:38)
in Switch (at Main.js:32)
in main (at Main.js:31)
in Main (created by Route)
in Route (created by withRouter(Main))
in withRouter(Main) (at App.js:83)
in div (at App.js:81)
in MuiThemeProvider (at App.js:90)
in App (created by HotExportedApp)
in AppContainer (created by HotExportedApp)
in HotExportedApp
in Router (created by HashRouter)
in HashRouter (at index.js:37)
in ErrorBoundary (at index.js:36)

Hi there,
Looks like there is problem with props passed to icon component

"material-ui-search-bar": "^1.0.0-beta.3"
"material-ui": "^1.0.0-beta.21"


<SearchBar
    onChange={this.onChange}
    onRequestSearch={this.onRequestSearch}
    style={{
      margin: '0 auto',
     }}
  />

Warning: Failed prop type: Invalid prop `color` of value `#9e9e9e` supplied to `SvgIcon`, expected one of ["inherit","accent","action","contrast","disabled","error","primary"].
    in SvgIcon (created by withStyles(SvgIcon))
    in withStyles(SvgIcon) (created by Search)
    in Search (created by pure(Search))
    in pure(Search)
    in span (created by IconButton)
    in button (created by ButtonBase)
    in ButtonBase (created by withStyles(ButtonBase))
    in withStyles(ButtonBase) (created by IconButton)
    in IconButton (created by withStyles(IconButton))
    in withStyles(IconButton) (created by SearchBar)
    in div (created by Paper)
    in Paper (created by withStyles(Paper))
    in withStyles(Paper) (created by SearchBar)
    in SearchBar (created by Search)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by withStyles(GridWrapper))
    in withStyles(GridWrapper) (created by Search)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by withStyles(GridWrapper))
    in withStyles(GridWrapper) (created by Search)
    in Search (created by SearchWrapper)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by withStyles(GridWrapper))
    in withStyles(GridWrapper) (created by SearchWrapper)
    in div (created by Grid)
    in Grid (created by GridWrapper)
    in GridWrapper (created by withStyles(GridWrapper))
    in withStyles(GridWrapper) (created by SearchWrapper)
    in SearchWrapper (created by TicketSidebarApp)
    in TicketSidebarApp (created by AppLoader)
    in AppLoader

There is a chance to run method on cancel button click?

I'm able to change the height and width of the bar with:

    <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      style={{ height: 30, width: 600 }}
    />

but the height of the search and close icon is too large. Is there anyway to change just the style for them without passing in new icons in closeIcon and searchIcon?

Any way to have the input focus automatically?

Not able to get any ref so unsure how to activate focus

Thanks.

I have a very simple component like this:

import React from 'react';
import SearchBar from 'material-ui-search-bar'


class SearchView extends React.Component{
	render() {
		return(
			<div class="search-component">
				<SearchBar/>
			</div>
		);
	}
}


export default SearchView;

When I start this and type anything, the letters appear literally seconds after I type and the whole thing is incredibly unresponsive. What's going on?

The app is created using create-react-app. I installed via npm i --save material-ui-search-bar.

hi im working with material-ui v1 i see u have fixed this bug for material-ui v1. but im still newbie so i don`t know how to update this npm plugin with the latest version of your work.

please help me. thankyou

The current version creates a handleCancel callback that is hardcoded. I'm using redux in my application, so I'd like to pass a handleCancel callback in as a property which will set the value of state.search to an empty string.

I am unable to increase the font size through the inline object, if i try to do the seach text is going below but the text size is not working

import React, { Component } from "react";
import { connect } from "react-redux";
import { withRouter } from "react-router-dom";
import { SearchTerm } from "../actions/index";
import Button from "material-ui/Button";
import SearchBar from "material-ui-search-bar";


class Searchbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      terms: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleLucky = this.handleLucky.bind(this);
  }
  handleSubmit(e) {
    // e.preventDefault();
    this.props.SearchTerm(this.state.terms);
    this.setState({ terms: "" });
    this.props.history.push("/projects");
  }
  handleLucky(e) {
    e.preventDefault();
    // After implementing machine learning show the most probable favourite projects
  }
  render() {
    const style = {
      marginTop: "4vh",
      width: "35vh"
    };
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          {/*<input
            name="terms"
            value={this.state.terms}
            type="text"
            onChange={e => {
              this.setState({ [e.target.name]: e.target.value });
            }}
            style={{width:"90vh",height:"5vh",padding:"1vh",fontSize:"3vh",marginLeft:"2vh"}}
          />*/}
          <SearchBar
            onChange={e => {
              this.setState({ terms: e });
            }}
            onRequestSearch={e => this.handleSubmit(e)}
            name="terms"
            value={this.state.terms}
            
            style={{
              margin: "0 auto",
              maxWidth: 900,
              height: "8vh"
            }}
            
          />
          <br />
          <Button
            variant="raised"
            label="Search"
            type="submit"
            color="primary"
            size="large"
            style={{ ...style, marginLeft: "8vh" }}
          >
            Search
          </Button>
          <Button
            variant="raised"
            label="Feeling Lucky?"
            onClick={this.handleLucky}
            type="submit"
            color="secondary"
            size="large"
            style={{ ...style, marginLeft: "4vh" }}
          >
            Feeling Lucky?
          </Button>
        </form>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state.term);
  return {
    interterms: state.term
  };
}

const MapDispatchToProps = dispatch => ({
  SearchTerm: term => {
    dispatch(SearchTerm(term));
  }
});

export default withRouter(
  connect(mapStateToProps, MapDispatchToProps)(Searchbar)
);

This is my code. I have tried putting it as a class name as well but to no use

Currently, there is no way to turn off spellcheck. The HTML5 standard requires specify "spellcheck=false" in

See

https://stackoverflow.com/questions/4524000/turn-off-chrome-safari-spell-checking-by-html-css

Doesnt seem to want to show up, not getting any errors, using it the same way the live example shows it, just passing it to a redux action

<SearchBar
    dataSource={this.props.searchData}
    hintText='Search by Crew Member'
    onChange={(value) => this.props.searchDataSource([value, value + value, value + value + value])}
    onRequestSearch={() => console.log('onRequestSearch')}
    style={{
        margin: '0 auto',
        maxWidth: '100%'
     }}
 />

here is a screen recording

See here: https://github.com/TeamWertarbyte/material-ui-search-bar/blob/master/src/index.js#L1

Rating instead of SearchBar

<SearchBar
onChange={() => console.log('onChange')}
onRequestSearch={() => console.log('onRequestSearch')}
style={{
margin: '0 auto',
maxWidth: 800
}}
/>

i got this error messege when i run my app,,, i am using material ui 1
Failed to compile.

./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Can't resolve 'material-ui/AutoComplete' in '/home/sareh/Desktop/skypeClone/SkypeClone/client/node_modules/material-ui-search-bar/lib/components/SearchBar'

This module does not work with the new material ui.

It would be good to create a beta version of this that is compatible, ready for the official release of v.1.0.0, which should be soon.

• Port the component (thanks @alexbrazier 🎉)
• Fix styleguidist somehow
• Publish to npm with beta tag

I'm using:
"@material-ui/core": "^3.2.0",
"@material-ui/icons": "^3.0.1",

And this is the error I get:

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/svg-icons/navigation/close' in '/home/faham/ethica/webserver/extensions/study_194_contacts/web/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 35:13-62
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./contacts.js
 @ ./app.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./app

Currently I am getting error that onRequestSearch is required, but I don't have any functionality for that feature in my app

Warning: Failed prop type: The prop onRequestSearch is marked as required in SearchBar, but its value is undefined.`

        <SearchBar
          onChange={(value) => {console.log("onChangeEv")}}
          dataSource={["array"]}
          hintText = {"this is a hint text"}
          onRequestSearch={() => console.log('onRequestSearch')}
          style={{
            margin: '0 auto',
            maxWidth: 800
          }}
        />

In Browser:
index.js:2178 Warning: React does not recognize the **dataSource** prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase datasource instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by SearchBar)
in div (created by SearchBar)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SearchBar)
in SearchBar (at App.js:23)
in App (at index.js:7)
stack_frame_overlay_proxy_console @ index.js:2178
index.js:2178 Warning: React does not recognize the **hintText** prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase hinttext instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in div (created by Input)
in Input (created by WithStyles(Input))
in WithStyles(Input) (created by SearchBar)
in div (created by SearchBar)
in div (created by Paper)
in Paper (created by WithStyles(Paper))
in WithStyles(Paper) (created by SearchBar)
in SearchBar (at App.js:23)
in App (at index.js:7)
stack_frame_overlay_proxy_console @ index.js:2178

Current master allows for overriding iconButtonStyle with a prop. Any chance of adding the same prop to the beta build, or just allow for the current styles prop to override them?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

warning.js:33 Warning: React does not recognize the cancelOnEscape prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase cancelonescape instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Unknown event handler property onCancelSearch. It will be ignored.

Installed search bar npm install --save material-ui-search-bar@beta. auto-populating is not working.

<SearchBar value = {this.state.searchKey}
				onChange={(value) => {this.setState({searchKey:value})}}
              	                 onRequestSearch={this.onSearchRequest.bind(this)}
				dataSource = {this.state.source}
				
            />

Is there a way to have an onClick function triggered when the close icon is selected. My use case is that when the clear text icon is selected, my data is still filtered because there isn't a trigger to bring all the data back.

Could we have some types for this?

I was wondering what needs to be done to use this in a Rails app? Mostly just need to know which files to include in my javascript folder and what HTML I should write to render the SearchBar.

I want to modify the styles of the <IconButton /> that contains the search and close icons, but I don't believe this gives the ability to do so.

Could you expose searchIconButtonStyles and closeIconButtonStyles?

Or you could have the default searchIcon be an <IconButton /> component, which can be overridden.

Thank you.

This is my code snippet

<SearchBar
    onChange={(search) => this.setState({ search })}
    onRequestSearch={() => this.props.searchValue(this.state.search)}
    style={{
            margin: '0 auto',
            maxWidth: '80%'
               }}
 />

How can I fire onRequestSearch function? When I enter a text, the search icon disappears and clear icon appears. So how can I fire the function? If I put another text field in the component without any use( no onChange event or anything) I can run the onRequestSearch on SearchBar by pressing Enter
. But if I remove that text field and press enter when the search bar is filled with a search text, the component re-render without calling onRequestSearch . So how can I run the function.

I've some trouble when i import the SearchBar component.

import SearchBar from 'material-ui-search-bar'

Got : Module not found.

The main entrypoint in "package.json" is incorrect :

  "main": "lib/index.js",

Only a small fix will allow us to use it :) .

We need an option for case insensitive searches.

I just tried the basic code:

    <SearchBar
      onChange={() => console.log('onChange')}
      onRequestSearch={() => console.log('onRequestSearch')}
      style={{
        margin: '0 auto',
        maxWidth: 800
      }}
    />

However I get this:

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/AutoComplete' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 19:20-55
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/IconButton' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 23:18-51
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/Paper' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 27:13-41
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/styles/colors' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 39:14-50
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/svg-icons/action/search' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 31:14-60
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

ERROR in ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js
Module not found: Error: Can't resolve 'material-ui/svg-icons/navigation/close' in '/Users/kmiao/Workspace/cesium-weather/client/node_modules/material-ui-search-bar/lib/components/SearchBar'
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/SearchBar.js 35:13-62
 @ ./node_modules/material-ui-search-bar/lib/components/SearchBar/index.js
 @ ./node_modules/material-ui-search-bar/lib/index.js
 @ ./src/WeatherInfo.js
 @ ./src/App.js
 @ ./index.js

Anything going wrong?

I am trying to use material-ui-search-bar component but I can't get value inputed from onRequestSearch and value property.
<SearchBar
onChange={this.onChangeSearch}
onRequestSearch={this.onSearchRequest}
value={this.state.searchValue}
style={{
margin: '20px auto 0',
maxWidth: 800
}}
/>

onSearchRequest = () => {
    console.log('searchInstances = ', this.state.searchValue);
};

I've using material-ui-search-bar v0.4.2. As part of my project, for my root node I include a MuiThemeProvider from material-ui like so:
const theme = createMuiTheme( { overrides: { /* No Fillets on buttons */ MuiButton: { root: { borderRadius: 0, fontWeight: 400, } } }, palette: { primary: { main: '#FF5959', }, }, typography: { fontFamily: [ 'Aileron', ].join(","), } }) ReactDOM.render( <MuiThemeProvider theme = {theme}> <Provider store={store}> <App /> </Provider> </MuiThemeProvider> , document.getElementById('root'));

This is in order to correctly style some of my other components. Now however, I include SearchBar in my product like so:
<SearchBar onChange={ () => { console.log('change!') }} onRequestSearch={ () => { console.log('Request Search') } } style={{ margin: '25px 0' }} />

and a TypeError is thrown that 'Cannot read property 'prepareStyles' of undefined' inside of Paper.render, Paper.js line 101. How should I resolve this issue. I have tried wrapping SearchBar in a separate MuiThemeProvider component however according to the material-ui docs this is not recommended and it does not work for me anyway. Thanks!

When the Searchbar is within a container with width under 280px the icons overflow the paper :

To reproduce this, go to https://mui.wertarbyte.com/#material-ui-search-bar and resize the window until you see the search icon exit the paper container (this is where the screencap was taken).
Could it be possible to have a more mobile friendly searchBar? or maybe make a dense version?
I tried playing with the component's source but was not able to find a fix. I don't know where this is coming from. Maybe using the input adornments to display the icons could help ?

When I add hintText value, it's not working, I tried placeholder, and it seems to be the correct field name ...

Is there any plans to update to @material-ui/core 3.0.2 ?

I'm trying to use this search bar and the latest materialUI doesn't actually have an AutoComplete component
Compilation error: Module not found: Can't resolve 'material-ui/AutoComplete' in '/Users/../node_modules/material-ui-search-bar/lib/components/SearchBar'

Hi all,

I would like to suggest that you add a debounce functionality, I am using the search and calling the api on every onChange and had to use lodash debounce method in order to make it work as I wanted.

Cheers

Sometimes, this search bar is just too big. Especially for the AppBar, a smaller search bar would be useful. Fortunately, I already coded that. 😅

Hi @leMaik,

I've noticed that search input does NOT lose focus after submitting data (when onRequestSearch occurs). Is there a way to programmatically lose focus from search input immediately after onRequestSearch? Because of that keyboards on mobile devices don't hide when data are submitted and focus is still present on search input.

Thank you!

I know the shadow is partly what makes this material but I need this to be more flat for this particular project. is there a way to do that?

Can you bring back the onClear Props ?
because when i click the close button that clears the search field, it doesn't change the state nor when using onChange props it doesn't fire. so the state remains the same

It's a usual pattern to start searching with Ctrl+F (out of scope for this project) and cancel searching with Esc. The latter could be done by this component.

I need change the initial 'Search' string in the field, maybe i can create a PR?

The hintText no work in "@material-ui/core": "^1.3.0"