I have enterprise edition of react-admin. I am using Search component from ra-search. Now I would like to change placeholder text in search text input. How can I achieve this?
You can override 'ra.action.search' in your localisation files, but it will change the default placeholder for all 'SearchInput's in your application.
Otherwise, you must copy/paste their code from /node_modules/#react-admin/ra-search/src/Search.tsx in a file of your own, then change the "SearchInput" in the return by adding the "placeholder" props of your choice.
<SearchInput
...
placeholder={translate('my.custom.placeholder.localization.key')}
/>
Related
I am using react select search as a part of the selection input in one of my forms.I need to obtain the on change text from the search provided is there any way to achieve this.
my components with their props are:
<SelectSearch options={selectSearchOptionsDepartment}
search={true}
name='department'
placeholder='Department'
value={updatedRoleDep?updatedRoleDep:deptValues}
onChange={(e,option)=>{onChangeSelectSearchDepartment(e)
HandelChange(option)
}}
emptyMessage={preCompile.newDepartmentAdd}
/>
Wanting to leverage some of the built in functionality (date validation, etc) of react-day-picker while not offering the calendar overlay (offering the user an input field without the calendar overlay).
I'm not seeing any options in the docs to show only the input field without the calendar overlay.
Am I missing something?
Maybe a hacky way but I can see that you can provide custom prop classNames to the DayPickerInput component. Source
And you could provide an object like
<DayPickerInput>
classNames={{
overlayWrapper: 'myCustomClass'
}}
/>
.myCustomClass {
display: none;
}
or if you can hide the default class for the overlay wrapper
.DayPickerInput-OverlayWrapper {
display: none!important;
}
Nope, looking into the source but it's open source. You can copy the file and remove the parts you don't need.
I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.
I have a large form and I would like when the user clicks a "new" button for the focus to be placed in a specific input field. There's a grid on the form and every field has a known id. Note it might not be the first field so not easy to use the tab.
Would appreciate some advice if this is possible. Would save having to manually have the user move the cursor over and click in the input field.
Update: Changed "move cursor" to "change focus"
Here is one solution -
Angular js gives you an advantage of using some of the extra features so that you dont have to use the jquery.
Here is one way to implement the autofocus feature.
<div class="button" input-focus>{{element.idORname}}</div>
and the directive to be defined here.
.directive("inputfocus",function($timeout){
return {
link : function(element,attributes){
element.bind('click',function($timeout){
$timeout(function(){
element/*.parent() or.child()*/.find('type of the field you want to select')[0].focus();
);
);
);
Here you can use the javascript or jquery methods for the dom traversal if there are nested fields in your code.
$timeout is necessary to call for the focus after the browser renders when user has finished clicking the event
As you can see the find('')[0] is a replacement for find('').focus as the latter requires jquery to be used.
Place "autofocus" attribute on the element that you want to focus.
Example:
Name: <input type="text" name="name" autofocus />
If all the input ids are known, just use that.
$("#NewButton").on('click', function(){
//Other code.
$("#IdOfInputToBeFocused").focus();
});
Custom data attribute can be used with jQuery like this
<input data-field="special" />
And then that specific field can be called like this
jQuery('input').find("[data-field='special']").focus();
How do I edit the default text 'Search...' that appears inside my search bar? I am using DNN 7.1
Here is my skin object:
<dnn:SEARCH ID="dnnSearch" runat="server" ShowSite="false" ShowWeb="false" EnableTheming="true" Submit="Search" CssClass="SearchButton" />
You can change the text Search... In file admin\Skins\App_LocalResources\Search.ascx.resx
in setting Placeholder.Text
you can change from here see the above highlighted portion.