ericgio / react-bootstrap-typeahead Goto Github PK
View Code? Open in Web Editor NEWReact typeahead with Bootstrap styling
Home Page: http://ericgio.github.io/react-bootstrap-typeahead/
License: MIT License
React typeahead with Bootstrap styling
Home Page: http://ericgio.github.io/react-bootstrap-typeahead/
License: MIT License
Hi.
Any idea on how i could restrict the input to this component to be only letters? So far i have tried connecting it to a redux-form-field that is hooked up to a reducer to remove all fields that are not letters.
TypeAhead selected={reduxField.value? [{name: reduxField.value}]: []} onInputChange={value=> reduxField.onChange(value)}
However, I am still able to write in digits in the textfield, although they will get deleted as soon as i type in a valid character it seems a bit odd to me. Any idea on how i could completely restrict the input to the textfield?
Can you add a new onKeyDown handler that is invoked when the selection menu is not shown?
Useful for higher level components to invoke save action when the "Enter" key is pressed.
Hi,
I have encountered that when you preselect item from the list and then double-click the text in the field, it is not possible to rewrite the query just by typing. You first need to erase the query and then start typing.
I think this is not intended and it breaks the ux of the component.
In our development workflow, we use gulp + browserify + babelify. This fails hard (without stacktrace even) on the lines which require css files, e.g. in lib/Token.react.js
:
require('../css/Token.css');
Commenting all these lines makes browserify/babelify pass. Is it possible to package the library in a way that it works out-of-the-box with browserify?
When cycling through the options using the arrow keys, pressing up will set the activeIndex
to the last filtered option rather than the last rendered option.
Pagination should probably be moved up to Typeahead
so that only options to be displayed are passed down to TypeaheadMenu
.
More individual examples w/code
Single-selection already works well; need better support for tokenizer.
Hi, after clicking on input box and hit enter key nothing happen.
`
please have a look, in version 0.8.2 its working but upgraed version is not working
Is it possible , that after declare paginationText="View All Result", can we bind onClick event when we click on "View All Result" ?
If I have an array of strings ready to act as data, I should be able to just pass in the array without having to first transform it into an array of objects
<Typeahead newSelectionPrefix="New: ">
doesn't change the displayed prefix because it doesn't pass it to TypeaheadMenu.
The latest React release (15.2.0, from July 1st) produces a warning that not all props should be passed to the element.
[Error] Warning: Unknown props `filteredOptions`, `labelKey`, `onAdd`, `onRemove`, `text` on <input> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in input (created by TypeaheadInput)
in div (created by TypeaheadInput)
in TypeaheadInput (created by Typeahead)
in div (created by Typeahead)
in Typeahead (created by TypeaheadClickOutside)
in TypeaheadClickOutside (created by SearchBarContainer)
This seems to be an issue with TypeaheadInput.react.js#L44
In our project, some of the dropdownlist data entries should be styled differently. Concretely: we're displaying 5 'favorites' or 'recently used' items on top.
A clean solution might be to optionally allow a React style
object on each data entry; next to the id
and name
? For instance:
var myData = [
{id: 1, name: 'John', style: {fontWeight: 'bold'}},
{id: 2, name: 'Miles', style: {fontWeight: 'bold'}},
{id: 3, name: 'Charles'},
{id: 4, name: 'Herbie'},
];
If you agree with this, I'll gladly create a pull request.
Hey great job on the component.
Wouldn't it make more sense adding react and react-dom as peerDedependencies in order to prevent it from throwing ref errors
Hi ericgio,
Still i am facing issue.
I have used paginationText="view All" in typeahead tag, but still it display "Display Additional Result".
can we implement click functionality after setting the text in painationText, so that i can navigate to other page?
With ES6 you gotta do this:
constructor(props){
super(props);
this.state = {
searchValue: ''
};
randomClass.context = this;
}
then
handleTextFieldChange(key, event){ randomClass.context.setState({[key]: event.target.value}); }
and finally in render()
<Typeahead onInputChange={this.handleTextFieldChange.bind(this,'searchValue')} labelKey="name" options={myData}/>
But its still giving me the error...
The solution above if applied to another input works just fine.
Why is event.target undefined when I call handleTextFieldChange in the component?
In other words, How can I clear value of typeahead intput?
I have see the demo of React bootstrap tyeahead, but can not understand the pagination feature. can you please explain about it.
<Typeahead labelKey="name" ref="typeahead" onChange={(selected)=>this.handleChnage(selected)}
onInputChange={(text)=>this.handleInputChange(text)} placeholder="what are you shopping for today?"
options = {TestApp} minLength = {3}
renderMenuItemChildren ={(props, option, idx) => {
console.log("Options Value",msg)
let img = <img src={'/static/images/'+ option.imageUrl} width='10%' height='10%' style={style} />
return [
<div key="name">
{img}{option.name}
</div>
];
}} />
Thanks for this project! I am trying to update to the new version and noticed an issue.
After updating to 0.7.0, my project isn't able to resolve the module. I tried to change main
from lib/index.js
to dist/react-bootstrap-typeahead.js
in package.json
and I was able to build with npm build
, but I am still seeing this error in the browser console:
Uncaught Error: Cannot find module "react-bootstrap-typeahead"
I am not able to hit enter key from textbox
<Typeahead labelKey="name" ref="typeahead" onChange={(selected)=>this.handleChnage(selected)}
onInputChange={(text)=>this.handleInputChange(text)} placeholder="what are you shopping for today?"
options = {TestApp} maxHeight={200} minLength={3}
renderMenuItemChildren ={(props, option, idx) => {
return [
please suggest, how to acheive this
Hello,
first of all, thank you for great library. Is it possible to add prop for existing Typeahead component like emptyLabel
, but for pagination sentense Display next {this.props.initialResultCount} results...
?
I use your library in my cyrillic-based language application and don't have opportunity to change that.
Currently this package depends on external configurations (for example the appearance of style-loader
when using webpack) to include the stylesheets.
I think the CSS shouldn't be included in this package, but instead should be mentioned in the docs, as a suggestion. Therefore it wouldn't be neccessary to override the included styles.
What is your opinion about this?
Don't make hint text case-sensitive
Hi!
I'm trying to make use of your plugin, but I'm a bit stuck because I'm using browserify with gulp, and I guess I need some transform, because requiring css files blows up otherwise. Any ideas? Thanks a lot!
It looks like all of your dependencies are set as devDependencies, however you use several of them in your lib code. Shouldn't those be included as actual dependencies? I've identified these, but there might be more:
"dependencies": {
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-input-autosize": "^0.6.2",
"react-onclickoutside": "^4.1.1",
"classnames": "^2.2.0"
},
In firefox buttons capture all events so children cannot be interactive, this is according to spec.
The official examples http://ericgio.github.io/react-bootstrap-typeahead/ are also broken in Firefox.
I propose that instead of rendering a button we render a div aria role button, etc.
PR incoming.
Can we add onBlur event for better integration with redux-form? It uses this event to trigger validation.
"TypeaheadInput is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components"
For my use case, I get all options from the server on the fly. When the textbox is focused and there is no user input yet, the options list is empty and it displays "no matches found". For my use case, that is very confusing to the user. In the case where there is no user input, how can I have it display nothing? I tried setting emptyLabel = null
but it still renders an empty box of options. How can I make it render absolutely nothing for the options?
The suggestion boxes for purposes of tabbing work as keyboard traps. I'll PR, real soon(tm)
First, thanks for a great component. I love it and it works great in all modern web browsers. However, I cannot seem to get it to work in the older browsers like IE 11. Are you planning on adding support for IE 11/IE 10.
Hey there,
I was wondering if it would be possible to have the "New Selection" always appear, or at least have a prop to toggle the behavior. At the moment, if the value in the Typeahead matches part of one of the options, the new selection bit is left off.
Example: The word "Carpet" is a possible choice for the Typeahead, but the user would like to enter the word "Car" as a new selection, but is unable to since "Carpet" is the only option.
When an item in the dropdown is selected, tab moves to the next item as expected. However, shift-tab still selects the next item, instead of moving backwards through the list as is normal shift-tab behavior.
I get this message when focus enters the Typeahead component:
Warning: React.__spread is deprecated and should not be used.
Use Object.assign directly or another helper function with similar semantics.
You may be seeing this warning due to your compiler.
See https://fb.me/react-spread-deprecation for more details.
I am using:
Hi and thanks for your help on the previous issue!
I've updated to version ^0.7.1
and I'm seeing the following React error (using Rails 4, Webpack 1.13.0, React 15.1.0):
Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See Typeahead
It might be related to this issue with react-onclickoutside
and the error seems to go away when I update the package to version ^5.3.2
.
Questions:
In versions > 0.6.0, Esc no longer closes the container. Tab used to as well, and I can understand why you would want to keep it open on tab (to select items), however Esc should still close the container.
The two lines responsible for closing the component were commented out in this commit:
23260ca
See:
Don't move cursor to the end when:
Very minor issue; doesn't affect functionality, just makes the input text slightly darker.
Can any one help, how to set value dynamically to Typeahead, as there is no any props to set the value as we done in text box.
I'm new to React. I'm using react-redux.
I have to make async call to server with the input text, so i'd need the value of the input, but i can't find a way to get it. How can i?
Thank you.
Pressing up, down and tab don't work as expected. Doing so jumps back and forth between focusing the first or last menu item and the input.
query 'lodash' by default resolved as 'lodash/index.js'
but this assembly extend global scope
and with module bundler this realy ploblem
please fix this import in library build babel-plugin-lodash
I couldn't find a good way to do this in the current code on master.
So as a hack (workaround) I modified the code like:
diff --git a/Typeahead.react.js b/Typeahead.react.js
index 27ea850..abafd76 100644
--- a/Typeahead.react.js
+++ b/Typeahead.react.js
@@ -300,6 +300,13 @@ const Typeahead = React.createClass({
text = selectedOption[labelKey];
}
+ onChange && onChange(selected);
+ onInputChange && onInputChange(text);
+
+ //clear the text after onChange has been consumed.
+ text = ''
+ selected = [];
+
this.setState({
activeIndex: 0,
selected,
@@ -307,8 +314,6 @@ const Typeahead = React.createClass({
text,
});
- onChange && onChange(selected);
- onInputChange && onInputChange(text);
I know its not perfect but wanted to see what your thought are on a feature like this.
I'm trying to add this module my my Babel/Webpack project and getting this error on compilation:
ERROR in ./~/react-bootstrap-typeahead/css/Typeahead.css
Module parse failed: /root/node_modules/react-bootstrap-typeahead/css/Typeahead.css Line 1: Unexpected token .
You may need an appropriate loader to handle this file type.
| .bootstrap-typeahead .dropdown-menu {
| overflow: scroll;
| }
@ ./~/react-bootstrap-typeahead/lib/Typeahead.react.js 33:0-31
ERROR in ./~/react-bootstrap-typeahead/css/Token.css
Module parse failed: /root/node_modules/react-bootstrap-typeahead/css/Token.css Line 2: Unexpected token .
You may need an appropriate loader to handle this file type.
| /* Token */
| .bootstrap-tokenizer .token {
| background-color: #e7f4ff;
| border: 0;
@ ./~/react-bootstrap-typeahead/lib/Token.react.js 27:0-27
Seems to me the issue is about how CSS is loaded/complied, but I'm not quite sure what is the best way to handle it for this module. It would be great to have some clear instructions for use with ES6...
We're using the typeahead component for a list of ~2000 cached items. Clicking the control adds all these options to the DOM, which takes some time and resources. Showing a list of more than a couple of dozens of items seems rather pointless.
Do you consider these kinds of large sets of data a valid use case for your component?
As far as a solution concerns, an option might be to set an optional maxResults
property or something. When set, this number of results is only ever shown at once in the dropdown list. Of course, there should be a way to inform the user that the list is not complete. Adding a dummy item to the top or the bottom of the list is probably easiest. Clicking this could select 'nothing'. Or instead, add a 'load all' option, which does load everything that meets the filter (or in case of no filter, all data). You'd need an additional property to be able to specify this message.
I integrate typeahead with react, but I am unable to click on list option and it is on enter only working.
Hi, i tried a simple example:
import React from 'react';
import {render} from 'react-dom';
import Typeahead from 'react-bootstrap-typeahead';
var myData = [
{id: 1, name: 'John'},
{id: 2, name: 'Miles'},
{id: 3, name: 'Charles'},
{id: 4, name: 'Herbie'},
];
render(
(<Typeahead
multiple
labelKey="name"
//onChange={this._handleChange}
options={myData} />
), document.getElementById('app'));
and im getting the error
Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's
render
method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
a quick google search lead me to this stack oveflow question wich where the top accepted answer suggests:
Make sure NOT to list react under dependencies in your package.json. This is why we have peerDependencies ;-)
Did i not manage my setup correctly, or is the suggested Stack overflow fix at play?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.