This repository was archived by the owner on Sep 5, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3.4k
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
select: md-select-header input not usable, md-select keydown listener overrides search function #9321
Copy link
Copy link
Open
Labels
- Lots of CommentsP3: importantImportant issues that really should be fixed when possible.Important issues that really should be fixed when possible.severity: inconvenienttype: enhancement
Milestone
Description
The demo shows to inject $element into the controller and add the following line to your controller:
$element.find('input').on('keydown', function(ev) {
ev.stopPropagation();
});
However, it is not allowed to inject the $element into a controller, and is improper to do so, and it throws this error:
Error: [$injector:unpr] Unknown provider: $elementProvider <- $element <- SandboxCtrl
All places I've attempted this are within an md-dialog. Without being able to get the md-select keypress listener turned off, I can't get search for select working. Is there some other workaround for this? I cannot get the demo to work on my app, but on codepen it appears to work OK.
Here's my implementation (HTML):
<md-input-container>
<label>Select or specify {{provision.provisionDestination.destinationType}} connection</label>
<md-select id="destinationConnections" name="destinationConnections" required ng-model="sandboxConnection" ng-disabled="provision.provisionDestination.destinationType == '' || isViewMode" md-on-open="loadDestinationByType();" md-on-close="setDest(sandboxConnection)" data-md-container-class="selectSelectHeader">
<md-select-header class="select-header">
<input ng-model="destSearchTerm"
type="search"
placeholder="Pick an Existing Destination"
class="select-header-searchbox _md-text">
</md-select-header>
<md-optgroup label="Existing Destinations">
<md-option class="destination-connection-option new-connection" ng-value="'0'" ng-click="loadDestinationFieldValues('0')">Specify a Connection</md-option>
<md-option class="destination-connection-option" ng-repeat="extDest in existingDestination | toArray:false | filter:destSearchTerm" ng-value=" extDest.destinationTitle" ng-click="loadDestinationFieldValues(extDest)">
{{extDest.destinationTitle}}
</md-option>
</md-optgroup>
</md-select>
</md-input-container>
bentaly, glepretre, daviian, keremtiryaki, iiitmahesh and 4 more
Metadata
Metadata
Assignees
Labels
- Lots of CommentsP3: importantImportant issues that really should be fixed when possible.Important issues that really should be fixed when possible.severity: inconvenienttype: enhancement
Activity
ArchiMoebius commentedon Aug 30, 2016
You can always use Vanilla JS as a workaround:
glepretre commentedon Oct 3, 2016
In our opinion it could be handled internally but here's what we did:
Based on @poerhiza idea, we just use angular built-in
ng-keydown
.fanorenantsoa commentedon Nov 25, 2016
thanks a lot! you saved me ;)
archcorsair commentedon Jan 26, 2017
I'm having a similar issue, although
$event.stopPropagation()
allows me to input text into the input field, it prevents myng-keyup
event from propagating. I've tried an alternative override where I pass the$event
through and decide if I want to stop propagation or not but without$event.stopPropagation()
I'm unable to even type in the input field.My code looks like this:
maiara-sassi commentedon Aug 10, 2017
Obrigada @glepretre
Splaktar commentedon Feb 27, 2018
I'm going to close this as there appear to be workarounds and the issue template wasn't completed (no AngularJS Material version indicated and no CodePen reproduction/demo). If this is still an issue for you, please open a new issue with all of the required information so that we can debug and resolve it effectively.
glepretre commentedon Feb 28, 2018
Hi @Splaktar,
As stated in @christrude first message, the issue appears on the demo page:
https://material.angularjs.org/1.1.7/demo/select#select-header
Here's a forked CodePen, just commenting out the
stopPropagation()
:➡️ https://codepen.io/anon/pen/BYveYr ⬅️
The demo explains:
But this is still astonishing to have to copy/paste these lines in our own code to make the
md-select
search input working "as expected" 😉26 remaining items