current version: "#mui/material": "5.4.1"
problems encountered: after adding the ListboxComponent property the pgup and pgdown buttons are unusable
Code Autocomplete
add ListboxComponent for Autocomplete
Code listbox
Code listbox
description video
Link: https://drive.google.com/file/d/1cYxZoDbY8eIGIaR5ibBmlfVtCgNBMwNo/view?usp=sharing
I wish that the pgup and pgdn keys and the up or down keys are all working properly
thanks everyone
Related
Here is the link for an example of the issue I will attempt to describe. In the chips autocomplete example, click the text box to select a new fruit.
Now, before clicking anywhere else, click again on the text box as you did before.
This should result in no options showing up. The issue here is that the user must either begin keying in a new selection or first click another element in the window before matchip will show the options to choose from. I am wondering if there is a way to fix this issue. I would like a user to be able to choose a selection from the list and then immediately click the text box as they had before and make a new selection.
I'm using mat-chip-list inside an outer *ngFor iterating over a FormArray.
Here is what I'have done. It's pretty efficient :
<input
#validatorInput
#operationTrigger="matAutocompleteTrigger"
[formControl]="contactCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
(blur)="contactCtrl.setValue(''); validatorInput.value='';"
(click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">
The trick is
Always clear your html input and your (shared) formControl with an empty and not null value each time the blur and click events occur.
Do NOT do this 'clear' on the input focus event. (Because when you delete the last chip, the input is auto-focus and you will have the famous Expression has changed after it was checked.
Call operationTrigger.openPanel(); when the user click on the input
Setting contactCtrl.setValue(''); allows your autocomplete panel to be automatically opened when you call operationTrigger.openPanel()
Setting validatorInput.value=''; is just a way to properly sync your formControl with the html input to ensure a good UX/UI behavior.
Inside my formArray, the formControl is the same for all the inputs but it does not matter since the user can only manipulate one input at a given time
Since you didn't post your code and you mention the example on the material site I'm going to do it as a fork of the stackblitz example they have on their site.
But this will allow you to open the autocomplete panel again despite having had the cursor there and choosing an option previously.
// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
#ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...
ngAfterViewInit() {
fromEvent(this.fruitInput.nativeElement, 'click')
.pipe(
tap(() => {
this.trigger.openPanel()
})
).subscribe()
}
Link to the full stackblitz:
https://stackblitz.com/edit/angular-sb38ig
I have a paper-textarea inside of a drawer. When I go to the page the paper-textarea autofocuses, which opens the drawer. I've tried to get rid of the focus by trying autofocus="false" and autofocus="off", but neither have worked for me. Any help would be appreciated.
<paper-textarea id="descriptionInput" label="Description" invalid="{{descriptionError}}" error-message="please enter a valid description" value="{{description}}" autofocus="false"></paper-textarea>
Update: Another way to go about this might be to remove the focus programatically, but I've tried this.$.descriptionInput.blur() inside of the attached function, and it's not working either.
This is due to iron-autogrow-textarea's autofocus property default value being set to "off". The autofocus attribute is active if it exists, the only way to disable it is to remove it all together (ie, autofocus="disabled" or autofocus="off" will still autofocus the tag).
I've created a pull request and this will hopefully be fixed in future versions.
For the time being, you can create a disabled input tag before the textarea with an autofocus attribute and visibility set to hidden and this will prevent the textarea from gaining focus.
<input disabled autofocus style="visibilty: hidden">
I ran into an issue with the answer by Kevin Ashcraft, on Safari it was not working.
Here is another option, since the issue it due to the presence of the autofocus attribute, you need to remove that attribute. So I have polymer element and in there I have the following
ready:function(){
var list = Polymer.dom(this.root).querySelectorAll('iron-autogrow-textarea');
list.forEach(function (e) {
e.textarea.removeAttribute("autofocus")
});
}
This scans my dialog, finds all iron-autogrow-textarea and removes the attribute from them... you can change the selector to get only the ones you need.
Update this has been fixed as of latest version Should mention this has been fixed in latest version of https://github.com/PolymerElements/iron-autogrow-textarea/releases/tag/v1.0.8
I'm using HTML5 field validation for controls input type = "number" , "email". On Submit red outline for this controls are coming since its a required field. But while clearing control values I want to remove this red border also. Any pointers will be helpful. I have tried $("#txtName").removeClass('invalid'); but its not working.
$("#txtName").removeClass('invalid') would work if you have a custom CSS class (.invalid) which you added yourself upon form validation (for example, with $("#txtName").addClass('invalid')).
If you're using built-in form validation (i.e. with <input type="..." required>), you should see
the answer to this other question, specifically the setCustomValidity(error) method.
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.