Please help
I'm using materialize version 1.0.0-rc.1 with react.
When I call javascript method to focus input field, it works only with textbox field.
You can check my code here at codepen
Thank you.
I found that I have to call focus() method of the input element which is a property of the instance returned by init command M.FormSelect.init().
const selectInstance = M.FormSelect.init(elm, {});
// then to focus the select field
selectInstance.input.focus();
Related
I would like to use Dropdown component and provide two options OK and reset buttons (as provided in Table example),
after some research I didn't find any mention about this functionality in Dropdown or Menu component api,
Does anyone implemented such functionality outside of Table components, any inputs how this is work?
The code implementing the OK and RESET options of that component are implemented specifically for the table dropdown here (https://github.com/ant-design/ant-design/blob/master/components/table/filterDropdown.tsx#L196-L222).
You can either implement it similarly (i.e. wrap the Menu with a div and handle the events yourself) or you could create an ant design github ticket and ask whether a) this should be part of the design specification and b) whether there should be a reusuable way to consume this
According to this issue in github such functionality can be reached via Popover with Menu + Buttons
You will want to bind to the change event via javascript/jQuery.
On $(document.ready() you can call a function that will do this binding.
Then you just check the value of the dropdown via a jQuery selector.
<script>
$(document).ready(function() {
$("dropdownSelector").change(function() {
var val = $(this).value();
//logic to do things
});
});
</script>
You can check out different ways to use jQuery selectors here: https://api.jquery.com/category/selectors/
I have a complicated setup. My application is driven by a set of "rules" which dictate what the user interface is. The UI is rendered by looping through the rules and creating the individual dropdowns. Initially, everything renders properly. However, once a user makes a change to the UI, other rules may be affected. In my application, an api call is made, which then returns a modified set of rules. In the attached plunker, I've simplified things such that only the new set of rules is applied, which causes the page to re-render. The problem is that my users would like to be able to tab between all of the entries on the page and make changes. However, once the page is re-rendered, the currently selected page element is now gone nothing has the focus. I've tried to put the focus back on the proper element by tracking a common Id, but to no avail.
Using either of these doesn't seem to work.
var el = document.getElementById(focusId);
el.focus();
angular.element(el).focus();
I've also tried using the autofocus attribute on the dropdown that I want to have focus, but that didn't work either. I'm using angularjs 1.2. Any ideas are appreciated.
http://plnkr.co/edit/ND9PKqULIOlixWR4XChN?p=preview
If you want to assign auto focus dynamically to a element on the DOM from angular you can use this:
var myEl = angular.element(document.querySelector('select'));
myEl.attr('autofocus',"attr val");
You can also pass in an id like: angular.element(document.querySelector('#focusId'));
You can look here for a prior answer which may be of some more help!
-Cheers!
Problem here is, you are trying to focus the element before the blur event completes. So you need to execute the focus code after blur event. Async execution of your focus code would solve the problem. You can use either setTimeout or $timeout.
setTimeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
or
$timeout(function(){
angular.element('#'+focusId).focus();
/* //or
var el = document.getElementById(focusId);
el.focus();
*/
});
dont forgot to inject $timeout to your controller if you are using second code. Hope this helps :)
I'm wondering if it's possible to enable html-tag support in react-select.
I'm using promise callback function to inject list of suggestion, and have added <em>tag into the results..
But there's no way to tell react-select consider it as html tag.
How to do that ?
You'll want to use the optionRenderer property for this, and define a custom method that returns your element. This can contain html.
See example of this in react-select documentation.
You should handle this as a string, and use Dangerously Set innerHTML to display it in your component.
how can we do that?
The problem is that ng-model is hard coded to searchStr and selectedObject is readonly.
Is there similar component for autocomplete for angular JS. Angucomplete is great because it can be connected with JSON response.
Solution
use angcomplete-alt, it has a lot of extra features and "initial-value" attribute.
Angucomplete is a component, in this you can set Initial value.
Please check below links for it.
http://ghiden.github.io/angucomplete-alt/
https://github.com/darylrowland/angucomplete
I am using Oracle ADF JDev 12.1.3
I have a custom declarative LOV component and one custom method "valueChangeEvent",
after user select some values from the popup, i will do some validations, if all validations are ok, then I need to raise "valueChangeEvent" event,
so that in the final jspx page additional logic's can be implemented,
My declarative component method definition as follows
<method-attribute>
<attribute-name>
valueChangeListener
</attribute-name>
<method-signature>
java.lang.Void method(javax.faces.event.ValueChangeEvent)
</method-signature>
<required>
false
</required>
</method-attribute>
In my custom LOV Component, i have one input text and button, I tried the following to invoke my custom method within the command button action, but it does not invoke the event at the main form, but no error shows
// get the component reference using Face Context ValueExpression
_this = getThisDeclarativeCompoent();
//try to queue the valueChangeEvent - but this does not work
_this.queueEvent(new ValueChangeEvent(_this, NewValue, OldValue));
Consuming application code is as follows
<af:declarativeComponent viewId="/ASGLOVBrowser.jspx" id="dc3" label="Modules" LOV_Name="MODULE"
bindingAttribute="#{bindings.ModuleId}" showDescription="true"
multiSelect="false" matchingField="CODE"
valueChangeListener="#{viewScope.DeclarativeTestBean.test_valueChangeEvent}"/>
appreciate if someone can help...
Value Change event is raised by the framework only, when input value changes, therefore you can't initiate the event without the value being changed either from UI or programatically.
So, you can get a reference of the input text UIComponent and change the value programatically:
RichInputText uiComp = <<<get reference>>>;
uiComp.setValue(newValue);