[New Component] Search Field #1985

yongxu · 2015-10-25T10:38:31Z

This is an update from #1446.
Review needed.

Sorry don't have time to do the document now. Maybe someone else could help on that.

oliviertassinari · 2015-10-25T10:43:25Z

docs/src/app/components/pages/components/search-field.jsx

@@ -0,0 +1,54 @@
+let React = require('react');


shaurya947 · 2015-10-26T16:16:24Z

I agree with @oliviertassinari that this field could use a more general name like TypeAhead.

Other than that, olivier has given some good code feedback that I would encourage you to look at. And we're being careful to merge new features with documentation, so @yongxu could you please look into that when you get a chance? :-)

Great stuff, thanks @yongxu

yongxu · 2015-10-27T16:11:15Z

Thanks @oliviertassinari , Great review.
Indeed this component is not perfect. I think there are quite a few things I could do better.
I am quite busy this week, but I will try to work this out in 2-3 days.
@shaurya947 , I was intended to create something that can be used as a search bar, TypeAhead does describe the behavior of this component, however it doesn't quite tell what this component should be used for.
I am open to new names, maybe we could come with a better name, like suggestion field?

newoga · 2015-10-28T06:25:08Z

What about AutoComplete?

When in doubt, we can stick to the terms used in the actual Material docs:
https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field

oliviertassinari · 2015-10-28T09:41:57Z

Looks like the material spec define two differents names, a SearchFilter and a AutoComplete. They both look similar. So yes, I would go for AutoComplete 👍 .

yongxu · 2015-10-28T15:43:57Z

@newoga AutoComplete I like this name. The link is also very useful.

The next step is to make it work like this, I am going to work on it.

shaurya947 · 2015-10-28T17:19:47Z

👍 AutoComplete for the win, then!

Looking forward to it @yongxu

vijayrawatsan · 2015-10-30T11:15:09Z

Really need this to merge.
AutoComplete it.
👍 @yongxu

vijayrawatsan · 2015-10-30T18:12:56Z

@oliviertassinari @yongxu Is there an example for testing out this component. Or can you point me in the right direction?

yongxu · 2015-10-31T01:02:58Z

@vijayrawatsan I am working on it! Should be able to work it out in the next 24 hours.

yongxu · 2015-10-31T23:40:36Z

I have made a few updates on the component, also changed its name to AutoComplete.

It should be ok to use in development, though there are few features I have in mind that I haven't had time to implement yet.

I will be really busy before Wednesday, sorry about that. I think this version should be good enough to merge. I will keep working on it after Wednesday. Feel free to make it better if you like!

@vijayrawatsan @oliviertassinari @shaurya947

Happy Halloween BTW :)

yongxu · 2015-10-31T23:53:01Z

I did not squash these 2 commits so that you can see what has been changed, I think it is probably reasonable to kept it this way so that we can trace back if needed. If you think the rebase is needed I will be happy to do that too.

s0meone · 2015-11-02T13:21:31Z

Thanks for this great component. We found one issue: when using the AutoComplete with a floatingLabelText the results menu is not correctly aligned with the input field.

shaurya947 · 2015-11-02T18:42:35Z

Changes look good to me @yongxu. If you can address the issue pointed out by @s0meone before we merge, that would be great!

Other than that, I'll let @oliviertassinari review this too (and merge) :-)

vijayrawatsan · 2015-11-02T19:20:27Z

@yongxu Too god mate.
onUpdateRequests implies data to show
onNewRequest ? what does this mean. Does this mean onSuggestionSelected?

vijayrawatsan · 2015-11-02T19:24:56Z

By the way @yongxu this one has a very good api
https://github.com/moroshko/react-autosuggest

oliviertassinari · 2015-11-02T19:43:27Z

By the way @yongxu this one has a very good api

I don't agree, see moroshko/react-autosuggest#71

vijayrawatsan · 2015-11-02T19:48:41Z

I really liked it just because of one missing feature you can't just say its bad.
It works smoothly and has most of the required callbacks. And mostly its always good to have a reference.
Anyways material ui is awesome and you guys rock. 👍

oliviertassinari · 2015-11-02T19:56:41Z

@vijayrawatsan I not saying that their API is bad. What I mean by I don't agree is regarding the implicit meaning: I don't think that we should fully follow their API based on what the author is saying.

I'm rebuilding react-autosuggest at the moment to support
flux architectures including redux. Check out this redux example.
You are more than welcome to contribute to the design of the new API.

However, they do have IMO good properties like showWhen
On behalf of the team, Thanks.

vijayrawatsan · 2015-11-02T20:14:28Z

@oliviertassinari
Sorry for misunderstanding.
Peace.
And you guys are really doing a good work. 👍

vijayrawatsan · 2015-11-03T18:41:02Z

@yongxu @oliviertassinari
Can we auto wrap content in drop down menu?
Basically I have a very long text in dropdown. Currently it auto trims which is great but what if I want to show the complete text.
Possible options:

Allow to specify width of dropdown item.
Allow to wrap.
Allow to specify max cahracters after which it trims

dlindahl · 2015-11-06T04:53:59Z

src/auto-complete.jsx

+          }}>
+        <div
+          style={{
+            widht:'100%',


Misspelled width.

oliviertassinari · 2015-11-06T16:02:51Z

@yongxu What do you think about their API http://react-toolbox.com/#/components/autocomplete dataSource (as react-native ListView) and onChange? I think this is great 👍.

bug fixed

yongxu · 2015-11-07T00:34:48Z

@s0meone That has been fixed
@oliviertassinari @vijayrawatsan, I added dataSource, which accepts array as auto complete result.
currently, if dataSource is defined, the return value of onUpdateRequests will be ignored.

@dlindahl Thank you for the review. problems have been fixed!

@oliviertassinari @shaurya947 I think it should be good enough to merge now!

oliviertassinari · 2015-11-08T13:23:45Z

src/auto-complete.jsx

+
+  getDefaultProps() {
+    return {
+      fullWidth: false,


Should we have a dataSource: [], as a default value?

If dataSource is null, then it will call onUpdateRequests. This was left uninitialized on purpose.

yongxu · 2015-11-10T20:06:41Z

@oliviertassinari @shaurya947 I think this component should be ready to merge, what do you guys think?

vijayrawatsan · 2015-11-10T20:36:58Z

@yongxu thanks for the reply:
"@vijayrawatsan I was thinking about to add overflow:hidden, it can be pass as style. Make it default seems to be preferable for most cases, I will make it default in the next update."

But that will hide the extra text. What if that text is very important. And I want to wrap it instead of not showing it. Is there any hack for it. (I am not asking you to support this feature, just asking for some hack.)

yongxu · 2015-11-13T23:26:34Z

@oliviertassinari dataSource is good for static data, but it is probably not the best way to update every time user type down a new character. I think there should be an event for every time user made one character change, and one for the user request(enter, or click on the list).
What if we change the name to

dataSource // for list proprity

/* function(searchText,prevDataSource) -> if return a list, 
   then replace dataSource with that list, 
   otherwise use the dataSource from props */
onUpdateInput 

//and
onNewRequest(searchText,index,dataSource) //if no match then index = null

Or use the nameonChange instead of onUpdateInput, Personally I think onUpdateInput is better.

@vijayrawatsan I will add that in the next pull request!

Sorry I have been too overloaded lately. I am going to make another update as soon as you guys agree on the name. So I will do it tonight or this weekend and make a nice finish. I am not sure how much time I will be able to help before Dec, but I will do my best. I know this component may not be perfect yet, but I think we should merge it so others can use it in their project or improve it when I am not available.

oliviertassinari · 2015-11-14T00:28:21Z

onUpdateInput

Sounds good to me.

and one for the user request(enter, or click on the list)

IMHO it's not needed for the autocomplete, but why not.

Can we make those two callbacks, not expecting any returned value?
I really think that it's better to have only one point of data for the component dataSource.

I know this component may not be perfect yet, but I think we should merge it so others can use it in their project or improve it when I am not available.

We will merge as soon as the API is stable 👍. Thank for the time you spent on this!

vijayrawatsan · 2015-11-14T07:31:27Z

@yongxu I fixed the wrapping by adding

innerDivStyle: { overflow: 'hidden' , whiteSpace: 'normal'}

Also there is one bug I would like to report.
Lets say you type in 'h' - > 4 results
After that you type 'e' -> 1 result

No you press backspace to remove letter 'e'. Now the dropdown should show 4 results but it only show 1 result, rest is empty space in dropdown.

This is fixed when I turn animated: false while creating menu.

yongxu · 2015-11-14T18:07:56Z

@vijayrawatsan I suspect the bug is from src/menus/menu.jsx

However I realized I should make animated a property instead of animated={true}

I will make auto-complete stable today and ready to merge today, then we can fix the animated issue in another issue report.

yongxu · 2015-11-16T06:24:03Z

created new PR because of the component name change.
Please see
[new component] auto-complete #2187

nslobodchuk · 2015-12-01T20:40:30Z

How do I limit the number of results displayed in the menu? For example, I have 4000 options and I want to display only 10 in the menu.

Bumps [cypress](https://github.com/cypress-io/cypress) from 4.8.0 to 4.10.0. - [Release notes](https://github.com/cypress-io/cypress/releases) - [Commits](cypress-io/cypress@v4.8.0...v4.10.0) Signed-off-by: dependabot-preview[bot] <[email protected]> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

working search-field

6832086

yongxu mentioned this pull request Oct 25, 2015

New Component: Search Field #1446

Closed

oliviertassinari reviewed Oct 25, 2015
View reviewed changes

docs/src/app/components/pages/components/search-field.jsx

@@ -0,0 +1,54 @@

let React = require('react');

Copy link

Member

oliviertassinari Oct 25, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const

oliviertassinari added the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Oct 26, 2015

yongxu force-pushed the new-search-field branch 2 times, most recently from a5d0926 to c15ecfa Compare October 31, 2015 23:40

yongxu force-pushed the new-search-field branch from c15ecfa to 88758e4 Compare October 31, 2015 23:47

oliviertassinari added the Review: review-needed label Nov 3, 2015

dlindahl reviewed Nov 6, 2015
View reviewed changes

src/auto-complete.jsx

}}>

<div

style={{

widht:'100%',

Copy link

dlindahl Nov 6, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Misspelled width.

yongxu force-pushed the new-search-field branch from 88758e4 to c28be97 Compare November 7, 2015 00:22

changed to auto-complete

da64e9a

bug fixed

yongxu force-pushed the new-search-field branch from c28be97 to da64e9a Compare November 7, 2015 00:32

Merge branch 'source' into new-search-field

68a59f2

oliviertassinari closed this Nov 8, 2015

oliviertassinari reopened this Nov 8, 2015

oliviertassinari reviewed Nov 8, 2015
View reviewed changes

yongxu mentioned this pull request Nov 16, 2015

[new component] auto-complete #2187

Merged

yongxu closed this Nov 16, 2015

yongxu mentioned this pull request Nov 30, 2015

[AutoComplete] does not display render menu items properly on backspace #2297

Closed

This was referenced Dec 2, 2015

[TextField] AutoComplete #579

Closed

[DropDownMenu] Typeahead #18

Closed

sergiu-paraschiv mentioned this pull request Dec 19, 2015

[AutoComplete] Menu items become invisible on dataSource changes #2575

Closed

yongxu deleted the new-search-field branch January 8, 2016 09:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[New Component] Search Field #1985

[New Component] Search Field #1985

yongxu commented Oct 25, 2015

oliviertassinari Oct 25, 2015

shaurya947 commented Oct 26, 2015

yongxu commented Oct 27, 2015

newoga commented Oct 28, 2015

oliviertassinari commented Oct 28, 2015

yongxu commented Oct 28, 2015

shaurya947 commented Oct 28, 2015

vijayrawatsan commented Oct 30, 2015

vijayrawatsan commented Oct 30, 2015

yongxu commented Oct 31, 2015

yongxu commented Oct 31, 2015

yongxu commented Oct 31, 2015

s0meone commented Nov 2, 2015

shaurya947 commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

oliviertassinari commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

oliviertassinari commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

vijayrawatsan commented Nov 3, 2015

dlindahl Nov 6, 2015

oliviertassinari commented Nov 6, 2015

yongxu commented Nov 7, 2015

oliviertassinari Nov 8, 2015

yongxu Nov 9, 2015

yongxu commented Nov 10, 2015

vijayrawatsan commented Nov 10, 2015

yongxu commented Nov 13, 2015

oliviertassinari commented Nov 14, 2015

vijayrawatsan commented Nov 14, 2015

yongxu commented Nov 14, 2015

yongxu commented Nov 16, 2015

nslobodchuk commented Dec 1, 2015

[New Component] Search Field #1985

[New Component] Search Field #1985

Conversation

yongxu commented Oct 25, 2015

oliviertassinari Oct 25, 2015

Choose a reason for hiding this comment

shaurya947 commented Oct 26, 2015

yongxu commented Oct 27, 2015

newoga commented Oct 28, 2015

oliviertassinari commented Oct 28, 2015

yongxu commented Oct 28, 2015

shaurya947 commented Oct 28, 2015

vijayrawatsan commented Oct 30, 2015

vijayrawatsan commented Oct 30, 2015

yongxu commented Oct 31, 2015

yongxu commented Oct 31, 2015

yongxu commented Oct 31, 2015

s0meone commented Nov 2, 2015

shaurya947 commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

oliviertassinari commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

oliviertassinari commented Nov 2, 2015

vijayrawatsan commented Nov 2, 2015

vijayrawatsan commented Nov 3, 2015

dlindahl Nov 6, 2015

Choose a reason for hiding this comment

oliviertassinari commented Nov 6, 2015

yongxu commented Nov 7, 2015

oliviertassinari Nov 8, 2015

Choose a reason for hiding this comment

yongxu Nov 9, 2015

Choose a reason for hiding this comment

yongxu commented Nov 10, 2015

vijayrawatsan commented Nov 10, 2015

yongxu commented Nov 13, 2015

oliviertassinari commented Nov 14, 2015

vijayrawatsan commented Nov 14, 2015

yongxu commented Nov 14, 2015

yongxu commented Nov 16, 2015

nslobodchuk commented Dec 1, 2015