Am fairly new to angular and I have an ui-select which fetches the data from remote service upon typing anything shows the related items in dropdown. It is a single select dropdown.
The problem is the input field requires two clicks to open. On first click the field gets focused and upon second click the cursor is present for typing.
Not able to get what is causing the issue.
<ui-select ng-model="page.model.form.relatedItem" theme="bootstrap">
<ui-select-match placeholder="Search ...">
<span ng-if="$select.selected.name" nbind="$select.selected.name"></span>
<span ng-if="!$select.selected.name" ng-bind="page.model.form.relatedItem.name"></span>
</ui-select-match>
<ui-select-choices refresh="page.getRelatedItemList($select.search)" refresh-delay="0" group-by="'group'" repeat="item in page.itemArray | filter: $select.search">
<span ng-bind-html="item.name | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>
Thanks for any help.
This is a known issue with the ui-select library for angularJs.
The problem is related to ngAnimate and the ui-select component. If ngAnimate is removed from the app, the problem will disappear. There are also a couple of workarounds if removing ngAnimate is not an option for you.
One workaround is to add a prevent-animations directive to the ui-select elements. Simplified code example follows:
<ui-select prevent-animations>
<ui-select-match prevent-animations>{{$item.title}}</ui-select-match>
<ui-select-choices prevent-animations>
...
</ui-select-choices>
Another suggested workaround in is to use a delay to add focus to the search field after component activation. Although the github issue referenced has been marked as closed, there are other open issues citing the same problem, and unfortunately this project is is now marked as archived, so don't wait for any fixes to appear there!
Related
I am using clarity signpost, I am using this signpost for showing multiple applications, how to close this sign post when i am click on the application.
For example I am adding three buttons in this sign post, if I click on the button this need to be close. Please check my stackblitz
To keep track of whether the signpost is open or not, and then be able to dynamically close it, you should use the de-sugarized syntax of clrIfOpen to utilize two-way binding:
<ng-template [(clrIfOpen)]="signPost">
<clr-signpost-content>
<button class="btn btn-outline" (click)="close()">Hr</button>
...
</clr-signpost-content>
</ng-template>
Here is your example with this change, working fine: https://stackblitz.com/edit/signpost-dynamic-close?file=src/app/app.component.html
I'm making a plugin that gets the actual panel or text selection and runs a command on the cli with that value and some params that the user adds in a input.
The idea is to have a similar view than find-and-replace package, but from the first beginning I wasn't able to use space-pane-views for a error on jQuery.
So I decided to make it with React and as far as I was making everything was okayish, but I found 2 big problems.
First I understand what's the View of space-pan and all the ShadowDOM that uses, I feel that is not compatible with React at all, is some kind of big Model that gets data from the dom and from some methods.
So I created a <input /> and I figuret out that you can't interact as normal as a website with that input, doesn't have the hability of delete normally the text and you can't use the atom-text-editor styles into it.
in another hand I try to create a Custom Web Component with React like:
<atom-text-editor
{...this.props}
mini
tabindex='-1'
class={`${this.props.className}`}
data-grammar='text plain null-grammar'
data-encoding='utf8'
/>
and it works with inheriting the styles, but I can't access to the content of the Shadow DOM, neither add eventHandlers like onChange (onKeyPress works btw), this is basically a problem more than React that Atom, but is as far as I went in the intention to create a View in Atom.
Another option could be add draft-js from Fb, but it's a crazy idea for create a simple input.
Any idea to solve one of both problems?
Thanks!
If you add a normal input in React with className='native-key-bindings' the input contains the nativew key bindings, and you can attach the eventHandlers there.
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
I'm a backpacker and a programmer, trying to use the second skill to find openings in a full campsite. Rather than crawling fro scratch, I'm using the end-to-end testing framework nightwatch.js to navigate for me.
I've hit a roadblock, because nightwatch is having difficulty finding a specific element using css selectors.
Here are the elements and page:
Here is my test code:
Previous Attempts
My test code will click on the selection box with #permitTypeId. It will see that #permitTypeId option is visible. It will not see or click on any of the options when more specific values are specified. The five .click()'s are all css selectors I've already tried. None of the options are set to display:hidden or display:none. I have also tried all of the above without the .waitForElementToBeVisible() just in-case the waiting causes the dropdown to hide.
I've successfully clicked options from different dropdown menus on this website without any problem. Just this one is causing a headache.
The tests are running with the most current Selenium server and Firefox on Mac Yosemite.
tl;dr
Nightwatch.js/Selenium won't click on something from a dropdown menu.
The Path...
Cory got me thinking about jQuery and native DOM manipulation. Tried going that route and was successful selecting the correct option using Selenium's .execute() function:
.execute('document.getElementById("permitTypeId").options[1].selected=true')
However, it was not triggering the onchange event.
Saw this post which made me start thinking about using key-strokes and this one which suggested using arrow-keys to navigate down a <select> element to the option, then hitting enter.
...to the Solution
.click('select[id=permitTypeId]')
.keys(['\uE015', '\uE006'])
I've found that this is an issue with Firefox. Chrome and PhantomJS operate well clicking <option> tags.
you should be able to click like this way
browser.click('select[id="permitTypeId"] option[value="1451140610"]')
Additionally I was able to add a .click event for the specific option once I did a .click for the select. see my example below:
.click('select[name="timezone"]')
.pause(1000)
.click('option[value="America/Chicago"]') //selects the option but doesn't click
.pause(5000)
.keys(['\uE006']) //hits the enter key.
another solution:
.click('select[id="permitTypeId"]')
.waitForElementVisible("option[value='1451140610']")
.click("option[value='1451140610']")
Very simple way is to use .setValue('#element', 'value of option')
I don't know if the problem is related to Angular or I'm making a mistake.
I have an <article id="about">, a link <a href="#about"> and I'm trying to style the targeted element with
:target{
border: solid 1px red;
}
when I click the link the article should have a red border, shouldn't it?. When I click the link the URL off course changes from /company to /company#about but nothing happens, I also checked in the console with JQuery $(':target') and it returns null.
I thought that maybe it's Angular related, where routing mechanism interferes with some default behavior. I'm using $locationProvider.html5Mode(true), Angular 1.1.4 and Chrome26.
EDIT: Finally got a non-working example here , it works until I inject $location in app.run().
This is due to a browser bug: https://bugs.webkit.org/show_bug.cgi?id=83490
See also the last section at http://css-tricks.com/on-target/
Just a guess but:
I think the click event may be returning "false".
That is to say, some code runs, and the default link clicking behaviour is over-ridden.
Try entering the page url, with the hash at the end, into an empty tab. If your :target css works in that case, you'll know it's a javascript thing.
Perhaps the framework adds a class, or some other identifier, which you could easily style? Or maybe if you inspect the DOM, a reference to it is stored in some object, which you could style with jQuery?
If you put target="_self" in the a tag it will solve the issue with the angular routing as long as HTML5 mode is enabled.