I'm looking to do some really complex autocomplete in a textarea kind of like what occurs with libraries like #mention. I'd like to have autocomplete options start after a delimiter, and then continue after periods to quickly navigate object trees. For example, typing # would give an autocomplete menu to all the keys in an object, then after selecting that key, the next period starts an new autocomplete that is an autocomplete for all the keys specific to that previously selected object. If the top level object had 3 different layers, the below would be the end result of the final autocomplete.
#[key1.key2.key3]
'#[this.category.UnitPrice]'
'#[topKey.midKey.finalKey]'
Anyone ever run into this kind of situation?
Related
I have one annoying problem with autocomplete in MUI 5.
I have several autocomplete components that are connected to huge dictionaries. Because of that, I don't insert the entire collection to "option" param in autocomplete, but call API to search in MongoDB when user inputs something.
In dev env when working with some forms (which have these components) I have a little annoying problem. Some of these components have the option multiple and when I have a value there and start looking for another value in console I have this warning.
MUI: The value provided to Autocomplete is invalid.
None of the options match with `{...}`.
You can use the `isOptionEqualToValue` prop to customize the equality test.
Everything works correctly and I have a valid implemented method "isOptionEqualToValue", but because I do not insert the whole dict to option, and when it searches a new value, API filters the collection for the search text.
Autocomplete thinks the values I chose previously are not valid because it is not in the options array, but are valid throughout the collection.
So my question is, can I get rid of this warning or should I do something else?
I read this article about 'why using index as a key is an anti pattern' and got curious why my project works so well with index based key matrix.
I worked on tetris project, and every second, matrix with 20 * 24 cells re-render and move tetromino. Each cell of the array includes the alphabet and it becomes division's className and decide the color of the cell and every second when tetromino moves, it works very well.
From his article's example and this question, if key doesn't get changed, react doesn't change that DOM element and add new DOM for a new item in the array. So my tetris stage should not update view because key doesn't get changed. I got so confused how react key works.
I searched a lot of articles, but what I could find only was that they are using for optimization and compare DOM, but not how. So I want to know, how does key works and what kind of procedure they do to compare before change Virtual Dom and after change Virtual DOM
React on its own when not using 'key' attribute is not very efficient when comparing lists, if an item at the beginning of the list is changed or inserted.
If you insert an element at the beginning of your list, React will rerender the whole list and not just add the inserted item (if you have no key attribute set).
Same applies if you use an index based key, as the key of all items will change on insertion and therefore the whole list will rerender.
With a correctly set key attribute react is able detect which item was inserted or changed and only rerender this part of the list.
You can find a detailed example and explanation in the React Docs in Recursing On Children and Keys.
You can inspect this effect if you use the browser extension "React Dev Tools". With the extension active, you can do the following:
open browser developer tools
got to "Component"-tab
go to tab settings (gear icon)
toggle "Highlight updates when components render."
try to insert an item of the beginning of a list with no key, and then again with a list which uses unique keys, an check which Components update
Using an index based key will work just fine, however performance wise it is not very efficient in cases where the dynamic list is updated at lower indices.
Key is like the id of the item, it's a bad practice to use indexes because if one of the items change his position in the list all the list will rerender, you probably can find cases that it will not affect your performance so much but I think it's a bad habit.
check this out: Why Are Keys Important In React
I am working on an input form using ADF. I have an input field in which I want to show a list from which the user can select the value and also require a type option in case the value user want is not in the list.
I use the JDeveloper 12.2.1.3 for development. I have tried using ADF ComboBox component based on a static list. The component gives a list a expected. But I cannot type in a new value in case the value I wanted is not in the list. I can only type whatever is in the list already.
I am looking for something similar to the HTML input-datalist combination which gives a list and allows type if the intended value is not in the list.
The InputListOfValues and other LOV components only allow you to enter data which is present in the list. That is the way these components are designed. It would not make sense to allow other input as you normally use such components in places where you want to make sure the user can only input reference data defined in other data.
Anyway, it's easy to create some kind of component which allows you exactly what you want. I wrote a blog n this here https://tompeez.wordpress.com/2013/02/03/jdeveloper-11-1-1-6-0-afinputtext-with-self-made-look-up-not-using-lov/
From this page you can download and run the ADF Faces Rich Client Demo, which shows all components and what they do.
I'm using AsyncTypeahead to query a GraphQL backend, and everything is working except one small visual glitch. The non-async version is designed to filter a fixed list of options in a dropdown menu as the user types. But with the async version, the backend query does the filtering so I don't need filtering on the frontend.
The problem is that the displayed menu is filtered and rerendered after sending the query but before the new results have come back. This causes an unnecessary and misleading UI update while waiting for the results.
For example, say you are searching for grocery items. The user types "ba" and sees
baking powder
bananas
granola bars
They change their mind, delete "ba" and type "s", and a new query is sent. But before the results come back, the UI filters the existing list (items containing "ba") to items containing "s" and displays
bananas
granola bars
Once the full results come back, the UI updates again to show everything containing "s".
bananas
granola bars
shampoo
shaving cream
How can I eliminate that flash by having the UI update only when new results (called options in the component) are provided by the async query?
Having not much experience in ReactJS currently trying to solve components cascade loading. Let me explain use case on an example.
Assume we have 3 comboboxes - Author, Book, Library.
Something triggers loading Author data -> When data is loaded, the first found author is automatically selected and is used as search criteria for the second combobox(Book) -> When all books of the selected Author is loaded, the first found book is selected. The selected Author and Book are used as search criteria for the 3rd combobox(Library) - after library is found select the first in the list.
Data is loaded using 'cross-fetch'.
Internal component is built from 3 "Select"(comboboxes) controls. Initially, an internal
implementation of 'Select' React control is used but the flow was
checked with react-select library as well. In both cases the
initialization of comboboxes looks similar:
<Select
options={authors}
value={selectedAuthor}
onChange={this._authorChanged}
/>
react-redux#connect maps state to props
So the questions is:
how properly and what is a proper place to catch "data loading is complete" events so that the next planning loadings may be initiated?
What I did/thought about:
I can detect in render() method that it is time to start the following data loading but as I learned it is not a good solution(we better not to do any operations other than required for rendering inside the method).
Theoretically, I can build loading chain from my actions but at the moment I do not like the idea as:
despite load method is currently used only for the initializaion of combobox later I want to reuse it in other places where next loading is not needed;
currently for me this does not look consistent when data load is not fired by ui events
I thought setting default selected value value={selectedAuthor}
during initialization would fire onChange event but it seems not true(at least in my case).