I did some research but couldn't find usefull solution.
Is that possible to keep placeholder always visible? I mean when I pick any option it replaces placeholder spot, but I do not want this, the desired expectation is to keep placeholder visible all the time.
If you don't want users to see what they selected, but still track it in your app, you can make use of onChange event to capture what users selected, but still pass value={null} to react-select so it think that nothing is selected - and it will display the placeholder.
Related
I am working with react admin and I am using TabbedForm to add data, the problem is that when I select item from dropDownSelectTree, and then add text to TextInput, the create button change from disable to able and my selected itemed disappeared, I want to know how to keep my selected items when the button change.
This could be a lot of things from incorrect state handling to incorrect props setup. However, without the actual code to check not many people will be able to help you out. So if you may, share your code with us.
Id like to show a popper with data in it which represents a history of searched suggestions on click, but replace that with the default autocomplete dropdown on type, and keep it unless the input is blank. One idea I thought would work was using a onChange handler to detect the length of input typed... which Ive not managed.
On click of the highlighted value Id like to redirect to another page. Currently I'm using json object to hold a few strings, with urls like this.
To achieve the desired results, we will be maintaining two seperate options searchHistory options & the default options. We can toggle between the options by checking if the input field is empty or user has entered something to search through the default options.
I've modified your code on sandbox. Following is the link.
https://codesandbox.io/s/zen-northcutt-fnc03?file=/src/App.js
I have a number of fields on my form. When the user changes the selected value in a dropdown, there is a hideExpression on each field that shows/hides the fields depending on what the user has selected. This currently works fine.
However, I am trying to make the dropdown default to the first option in the select. This also works fine.
My issue is that all of the hideExpression logic is not being fired upon loading of the screen. So the select is defaulting correctly but none of the fields (that should be shown) that go with that option are visible.
If I manually change the dropdown value then everything is shown correctly. Is there a way to make the hideExpression logic get kicked off even when the select is being defaulted via code?
Here is a JSBin for my issue: http://jsbin.com/doliyiruza/edit?js,console,output
The page defaults to Option2. Yet, there is a hidden field that should show whenever Option2 is selected. So if you change the dropdown to Option1 and then back to Option2...you will see the hidden field. The hide/show logic doesn't seem to get kicked off if you set a dropdown to a certain value by default.
I'm not 100% sure why what you had wasn't working, but querying the DOM in your controller is a very very bad idea. Also, angular-formly intentionally tries to make field IDs non-deterministic so you can't do that (should probably make it more random). Here's what I think you're trying to accomplish: http://jsbin.com/bifaza/edit?js,console,output
I have a text field that uses AngularUI's typeahead feature. It looks like this:
<input typeahead="eye for eye in autocomplete[column] | filter:$viewValue">
I'd like to force the user to select an option from the list that is generated. If they type something that is not on the list exactly as it appears, on blur (clicking outside of the text field), i'd like the value of the text field to reset to it's original value.
Is this functionality part of the typeahead directive, or will I need to extend it? I searched for about 10 minutes on google and stackoverflow, but couldn't find any relevant documentation.
Can anyone please point me in the right direction to accomplish this?
There is an attribute in the plugin to force existing values only: typeahead-editable="false". The default value is true.
Only the $modelValue is being set to empty when there is a wrong value selected, and this is actually necessary otherwise we would not be able to write anything. The $viewValue stays with the last text entered. You might be able to bind a blur event of your own to the field to reset the $viewValue?
Here is your JsFiddle with the selected value displayed: http://jsfiddle.net/ZjPWe/61/
You could also use the attribute typeahead-on-select which required a callback when a value is selected, but I am not sure it would work with typeahead-editable="false" because no value is being selected.
I need a search field component but i don't find such a component or a imeoption for text field to make it as search field. i search a lot but still nothing founded.
is there any way to do that?
Thanks in advance.
What do you mean by "search field"?
There is a DataChangeListener that allows you to track fine grained changes to the TextField. You can set a hint & hint icon to show that this is a search field. Its unclear what you are missing.
Edit based on comments:
To get the magnifying glass icon instead of Done button on Android you can use the somewhat undocumented flag:
textCmp.putClientProperty("searchField", Boolean.TRUE);
This is a done event, so you can distinguish pressing this from pressing outside of the field by using the done listener callback on the text component.