I'm using Angular 8 with the Angular Material components, and am running into an issue with the focus indicator in a dialog.
When there is a radio group as the first control inside a dialog, as you tab around the dialog, the first option on the group gets selected - even if there is another option selected. i.e. when tabbing forward through the form, if the 2nd option is selected, the focus goes to the first option, then the selected option, then the buttons.
I've created a stackblitz here: https://stackblitz.com/edit/angular-2nkqr3 which shows the issue.
Does anyone have any ideas on how to stop/work around it always putting focus on the first option? (other than put something else first - unfortunately its the only thing in the dialog).
Thanks in advance for any advice,
Matt
Its simple set autoFocus:false when you call dialog like
openDialog()() {
const dialogRef = this.dialog.open(PopupComponent, {
panelClass: 'modal-medium',
data: { dialogueName: "Name" },
autoFocus: false, //disable auto focus in dialog
});
}
Just to loop back round on this. Turned out it was an issue in Angular material at the time: https://github.com/angular/components/issues/17876
Should be fixed now.
Related
I've noticed sometimes the keyboard tabbing for focus gets messed up. In this case I am using a Blueprint Dialog component which contains a form to be submitted. The form is built with Redux Form wrapped Blueprint input components. When the dialog first opens I can tab to the concentration field of the form. The next two tabs focus hidden elements (see first image below). Then the "x" to close the dialog is focused, then the concentration field is focused again, and finally I can tab and focus the remaining fields and buttons.
Any tips on how to improve this? Its not clear to me why the pt-overlay-backdrop nor the pt-overlay-content would ever want to be tabbed into. I see they both have tabindex="0".. maybe that should be -1?
Thanks!
Set Dialog's autoFocus to false can fix this issue.
I am writing a plugin that uses a dialog box.
I notice that clicking the toolbar button to open the dialog box fires a change event on the editor. Is there anyway to disable this event when opening the dialog box?
The plugin modifies the content using setAttribute(), removeAttribute(), and removeStyles(). Is there anyway to have calls to these methods fire a change event?
After more investigation, I discovered 2 issues (which I think relates to using YUI's App Framework), which might be the cause of the unexpected behaviour.
To reproduce: http://jsfiddle.net/c3tqk/
Problem 1:
1. Select part of the first paragraph (text) and click the Edit Link button.
2. Select part of the second paragraph (link) and click the Edit Link button. Check the console and notice a change event is fired.
Problem 2:
1. Select ex in the first paragraph and click the Bold button.
2. Deselect and select the x in the first paragraph and click the Bold button. Notice that the change event is fired twice.
You can always fire an event manually though it's not usually recommended. Use CKEDITOR.event.fire:
element.setAttribute( 'foo', 'bar' );
editor.fire( 'change' );
A better idea is to use editor#saveSnapshot event, which creates undo snapshots (your change becomes officially undoable, that's pretty cool) and fires editor#change automatically, if needed:
element.setAttribute( 'foo', 'bar' );
editor.fire( 'saveSnapshot' );
You can also interrupt existing events as they get fired and make sure no other listeners are called. Simply use CKEDITOR.event.on listener with low priority.
editor.on( 'change', function( evt ) {
if ( some condition ) {
evt.stop();
// ...or...
evt.cancel();
}
}, editor, null, -999 ); // by default listeners have priority=10
See CKEDITOR.eventInfo.stop and CKEDITOR.eventInfo.cancel. They're slightly different.
It might be tricky to get why the event is fired as you click to open the dialog box (and to create the right rule), but it feels quite possible. I couldn't reproduce it though (tried latest Chrome and FF); change was fired only when typing or executing commands (like Bold, Link, etc.). If you provided some extra info about your setup (versions of CKEditor and the browser, editor config and the name of the dialog), it would be much easier to debug.
I am using Kony 5.5 plugin then took build for BBQ10. I declared red colour for the button in the skin. But the colour has not applied to the button means black colour button displayed instead of red colour button in the Q 10 device. I want to change the colour of the button. Please give me solution.
A couple of things to check:
1. make sure that under the Skins for the button widget, there is not a forked setting for BB; you may have changed the "Common" skin, but if there is a declared skin specifically for BB, then it will override your settings.
2. Try adding a new button just to test, specifically set the color to red, and see if that button is displaying properly. This will show if there is an overall issue or just an issue with the button you are trying to configure ( this is more of a sanity check than a technical fix )
Customized skin using colour doesn't work to Blackberry 10 devices.It is a limitation of Kony platform.Please read documents the following link.
Docs
First you have to check whether you choose skin option for button then check its under common. Because you may choose on Windows, iOS or other. Try this:
//Defining the properties for a button with skin: "btnSkin".
var btnBasic = {
id:"button1", isVisible:true, skin:"btnSkin",
focusSkin:"btnFSkin", text:"Click Here"
};
var btnLayout = {
containerWeight:100, padding:[5,5,5,5],
margin:[5,5,5,5], hExpand:true, vExpand:false,
displayText:true
};
var btnPSP={};
//Creating the button.
var button1 = new kony.ui.Button(btnBasic, btnLayout, btnPSP);
//Reading skin of the button.
alert("Button skin ::"+button1.skin);
I have set enableTextSelectionOnCells according to SlickGrid and Text Selection.
I am not really happy about it.
Cell text gets selected with a bad behaviour. Sometimes as soon as selection is done, the selection disappears. Only on rare occasions does it work.
Has anyone faced this issue?
I have tried this on Firefox and Chrome.
to reproduce:
git clone git#github.com:mleibman/SlickGrid.git
go to examples folder
edit the example1-simple.html
Add enableTextSelectionOnCells: true in options
Open example1-simple.html in FF/Chrome
Try selecting a cell value
FYI, I am running on Ubuntu if it should make any difference.
This problem is already solved on Github. You just have to modify slick.gird.js. Around line number 2270, you just have to add " options.editable && ". Hope this help.
if (!currentEditor) {
// if this click resulted in some cell child node getting focus,
// don't steal it back - keyboard events will still bubble up
// IE9+ seems to default DIVs to tabIndex=0 instead of -1, so check for cell clicks directly.
if (options.editable && e.target != document.activeElement || $(e.target).hasClass("slick-cell")) {
setFocus();
}
}
As visible in the image, i have a "Hide" button. On click of the Hide button i want the left panel to be hidden and the right panel to cover 100% of the screen. On doing so, the "hide" button will change to show where the panel comes back to its original position.
For doing the same
xtype:'toolbar',
docked:'top',
items:[
{
cls:'hide',
xtype:'button',
text:"Hide",
iconMask:true,
ui:'back',
id:'hide',
handler:function () {
var viewWidth = Ext.Viewport.getWindowWidth();
alert(viewWidth);
desiredWidth = Math.min(viewWidth, 400) - 10;
Ext.fly('protocol').setStyle('width', desiredWidth); ;
}
},
I tried the above code to change the width of the panel dynamically but Ext.fly doesn seem to work.
What could be the solution to this?
Any help is appreciated.
A highlight of the left panel will be appreciated.
However, just looking at your image and I am making an assumption here.
If all you want to hide is the left panel containing the following
Then perhaps, what you can do is to do a jQuery toggle after declaring the LEFT and RIGHT panels within a "DIV" html
tag for example. See link below.
jQuery API for toggle
Also, if you're using a Javascript library or tool to build this, then you might want to get the source of the Javascript and dive into that.
From my experience, it is a lot easier to write a Javascript function on your own rather than to use something ready built.
Ext.getCmp('workItemPanel').hide();
worked well for me.