-
Notifications
You must be signed in to change notification settings - Fork 969
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Autocomplete reimplementation #1169
Comments
Hey, just curious, is this already being worked on somewhere? Or is it just at the ideation stage for now? |
Just to clarify that this change will add the scrollbars to the dropdown if there are options hidden from the view? Also when can we expect this to be released? |
Is there any update/progress on this? We have a use case for an ajax-based autocomplete and would love to use this. Happy to help out if needed. |
To get the ball rolling/randomly suggest a feature: We have a need to:
We're currently performing steps 1 & 4 via an Input and an element like the |
Looking for a way to sort by property value instead of property name. |
@joelzimmer For the record, you can use this component with AJAX. I did this today using this HOC (Full disclosure: that I made) https://www.npmjs.com/package/react-redux-ui-state Here is the example I got working using Apollo, hopefully someone can use the idea: import React from 'react';
import { withApollo, compose } from 'react-apollo';
import { pick } from 'lodash';
import Autocomplete from 'react-toolbox/lib/autocomplete';
import { uiState } from 'react-redux-ui-state';
import suggestionQuery from './queries/suggestionQuery.graphql';
export function MyComponent({ client, setUiState, uiSelections, uiSource }) {
function slugify(str) {
return `${str.split(' ').join('_')}`;
}
function loadSuggestions(query) {
setUiState({
uiSource: { [slugify(query)]: query, ...pick(uiSource, uiSelections) },
});
return client
.query({
query: suggestionQuery,
variables: {
text: query,
},
})
.then(({ data: { suggestions: { items } } }) => {
// we want to update the source with the results from the server
const results = items.reduce((acc, item) => {
return {
[slugify(item.label)]: item.label,
...acc,
};
}, {});
const merged = { [slugify(query)]: query, ...results, ...uiSource };
return setUiState({
uiSource: merged,
});
});
}
return (
<div>
<Autocomplete
direction="down"
selectedPosition="above"
label="your label"
multiple
onChange={value => setUiState({ uiSelections: value })}
onQueryChange={loadCategorySuggestions}
onFocus={() =>
setUiState({
uiSource: pick(uiSource, uiSelections),
})}
source={uiSource}
suggestionMatch="anywhere"
value={uiSelections}
/>
</div>
);
}
const uiStateConfig = {
name: 'MyComponent',
state: () => ({
uiSelections: [],
uiSource: {},
}),
};
const wrapper = compose(withApollo, uiState(uiStateConfig));
export default wrapper(MyComponent); |
1 bug: When Autocomplete is placed in the end of a Card, its options are clipped away by Card's 'overflow: hidden'. |
One of the most problematic components so far is the
Autocomplete
. The most important problem is that the control logic and state is delegated to the component internals which makes very difficult to maintain the improve the component. Also, it's not fully customizable: the rendering of internal options cannot be easily changed, there cannot be separators, Chips are always rendered in the same place, you cannot control rendering inside the cursor... etc. Also you have to control how many options are passed because children rendering is delegated,All of this point to a reimplementation more than fixes. I'm closing issues related to the Autocomplete, they are going to be fixed here. Fixes #174 #1065
The text was updated successfully, but these errors were encountered: