Let's assume I've got Polymer custom control like:
<template if="{{editMode}}">
<input id="myInput" type="text">
</template>
<div on-doubleclick="{{setEditModeToTrue}}">
some stuff here
</div>
Now I want #myInput to be text focused everytime editMode is true. The problem is that in the setEditModeToTrue handler #myInput is not yet in DOM tree so I can't focus it by:
root.QuerySelector('#myInput').focus();
(And yes I tried setting autofocus attribute on input but it works only for the first double click)
Is there any event or something else letting me know that template-if content is in DOM tree ?
You can wrap or extend the input element and put your code in the attached or ready lifecycle method or use MutationObserver.
Related
I'm using matInput. What I want is that the content in matInput is marked/highlighted so that if I press any key the text gets deleted. For example you double click a word in the search bar here in stackoverflow. How can I archieve that?
<mat-form-field>
<input matInput [(value)]="test">
</mat-form-field>
Assuming you're using Angular 8, you can use #ViewChild decorator to get a reference to your input element. Then you select the input value within the ngAfterViewInit lifecycle hook. In order to link the input element with #ViewChild, you can use a template reference variable (e.g. #food).
Please have a look at the following StackBlitz
Please note that using setTimeout inside ngAfterViewInit prevents you from getting an ExpressionChangedAfterItHasBeenCheckedError.
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
I cannot get Capybara for find a checkbox element.
I've tried all the usual ways:
find_field
check
find
click_on
It's as if the element isn't there. If I select the parent element, and look at it's innerHTML the checkbox is included:
(byebug) all(:css, '.checkbox.form-group').last['innerHTML']
\n <input type=\"checkbox\" id=\"google_agreed_to_terms_at\" value=\"1\" required=\"true\" ng-model=\"agreed_to_terms\" required-notification=\"Please agree to the terms and conditions\" class=\"ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required\" bs-validation=\"\">\
but selecting the child elements it's not there:
(byebug) all(:css, '.checkbox.form-group').last.all :xpath, './*'
[#<Capybara::Node::Element tag="label"
path="//HTML[1]/BODY[1]/DIV[2]/DIV[1]/DIV[2]/FORM[1]/DIV[1]/LABEL[1]">]
I feel like I'm going mad.
Here's the relevant code (copied from save_and_open_page)
<div class="checkbox form-group">
<input type="checkbox" id="agreed_to_terms_at" value="1" required="true" ng-model="agreed_to_terms" required-notification="Please agree to the terms and conditions" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" bs-validation="">
<label class="label-light" for="agreed_to_terms_at">
I have read and agree to the terms</label>
</div>
I thought maybe rails was generating slightly non-compliant HTML, so I've gone to writing the checkbox by hand, but it didn't help.
What's going on here?
The checkbox is hidden to allow for uniform styling across all browsers. Since you have a label element correctly associated you can tell check to click the label instead of the actual checkbox
check('agreed_to_terms_at', allow_label_click: true)
which will click the checkbox if visible and if not it will click the label. If you want it to only click the label you can do
find(:label, 'I have read and agree').click
Or
find(:label, for:'agreed_to_terms_at').click
Due to CSS styling, the checkbox element was being hidden and the label used to present it. So the element was getting skipped over by capybara's default behaviour to ignore hidden elements.
I worked around it using
find('#agreed_to_terms_at', :visible => false).trigger('click')
I am trying to use Knockout Validation in combination with Bootstrap Combobox Plugin.
I have a select control that is bound to my observable property which has the required attribute (for KO Validation).
<select data-bind="attr: { options: TypeAheadSource, value: XYZ, validationOptions: {errorElementClass: 'input-validation-error'}, typeaheadCombobox: {}"></select>
I have a custom binding associated with the select control in which I basically just call the Bootstrap Combobox Plugin. That creates a Div with an input control over the select control and hides the select control.
The knockout validation fires up when I dont select a value in the comobox and shows the error message next to the control BUT the field is not highlighted. Here is how it looks like
As you can see, the error message shows up but the input field is not highlighted.
Here is the final html that is generated when the validation fires.
<div class="combobox-container">
<input style="position:static;" type="text" autocomplete="off" data-bind="{ value: Name, validationOptions: { errorElementClass: 'input-validation-error' }" class="input-large">
<span class="add-on btn dropdown-toggle" data-dropdown="dropdown"><span class="caret"></span>
<span class="combobox-clear"><i class="icon-remove"></i></span></span>
<select data-bind="validationOptions: { errorElementClass: 'input-validation-error' }, options: TypeAheadSource, value: Name, typeaheadSimpleCombobox: { }" class="combobox input-validation-error"></select>
</div>
As you can see, the select control (which was hidden by the plugin) gets the validation error class I defined ('input-validation-error') but the input control created by the plugin does not.
That is the main issue here.
So, I thought it could be becasue the input control is not directly bound to the property. So, I tried adding the same value binding as the select control to the input control created by the plugin inside the custom binding. I also added the validationOptions binding. These changes didnt work either.
Strange thing is I also have a typeahead textbox bound to another property which uses a similar design (custom binding to create the typeahead plugin over an input control) and the validation + highlighting works perfectly on that. Here is the final html from that.
<input type="text" data-bind="value: xyz, validationOptions: { errorElementClass: 'input-validation-error' }, typeaheadTextBox: { source: $data.TypeAheadSource }" class="typeaheadValue input-mini" data-provide="customtypeahead" autocomplete="off">
Could someone tell me if I am missing any additional steps. I am sure you might need more details.
Please leave a comment and I will try to add more details.
Thanks.
I figured the issue. In case someone has the same issue, here is what I did.
Even though I setting up the value bindings on the input control created by the plugin, the bindings were applied before the control is created and so, I had to reapply the bindings specifically on the input control created by the plugin. That did the trick for me.
i want to have a click-able images, which change on roll-over/out/click. needless to say, i want that after the 'onclick' the page won't reload.
i'm trying to accomplish this with either h:image or h:commandButton - both don't work as expected.
the most annoying this is this:
i have in my code-bean the following simple function:
public String getClick()
{
return "alert('abc')";
}
and in the jsp file, the following code:
<td><h:commandButton id="a" type="button" value="click" onclick="#{CodeBean.click}" /></td>
<td><h:commandButton id="b" type="button" image="/resources/empty.jpg" onclick="#{CodeBean.click}" />
upon click, both raise the alert box, however, only the second one reloads the page, while the first one doesn't. don't know what i has to do with it, but when i look at the compiled page's source, i see that the first button's type stays 'button', but the second one is turned into 'image'.
any suggestions?
cheers,
eRez
The default behaviour of the <h:commandButton> (and <h:commandLink>) is to submit the parent POST form which is specified by <h:form>.
The onclick attribute just allows the developer to execute some piece of JavaScript code right before the form is been submitted. It does by default not block the form submit. If you'd like to block the button's default behaviour (submitting the form), then you'd need to add return false; to the onclick.
In case of <h:commandButton>, the component's type attribute defaults to submit and it will generate a HTML <input type="submit">. When you change it to button, then it will be turned in a "dead" button which does basically nothing, expect of executing any JavaScript handlers attached to it, and it will generate a HTML <input type="button">. When using the component's image attribute, then it will be turned in an image map which allows you to submit the X,Y position of the cursor relative to the image (however, in your case you seem to want just a background image; in that case you should actually be using CSS background-image instead) and the component's type attribute will be ignored and it will generate a HTML <input type="image">.
This is all clearly documented in Encode Behavior section of the tag documentation.
If your sole requirement is to block the <h:commandButton type="image"> from submitting the parent form, then you need to add return false; to the onclick, as said before:
<h:commandButton image="/resources/empty.jpg" onclick="#{CodeBean.click}; return false;" />
An alternative is to use type="button" in combination with a CSS background image (so that you aren't abusing the image attribute):
<h:commandButton type="button" styleClass="emptyButton" onclick="#{CodeBean.click}" />
with the following in a CSS file which is loaded by <h:outputStylesheet>:
.emptyButton {
background-image: url(#{resource['empty.jpg']});
}