How to close the list of a Tagfield in Ext.js 6.0.2 by clicking on its label in Internet Explorer 11?
Look into the Fiddle to test it.
https://fiddle.sencha.com/#fiddle/1h9n
First, you need to understand what's going on better. The tag field isn't closing because you clicked on the label; it's closing because the tag field has lost focus. In Chrome, you can click anywhere outside of the tag field and it will close - not just on the label.
This in turn gives a hint as to what's going on - the tag field isn't losing focus. Now, when you look at the label HTML code, it's configured with a for attribute - it's the label for the tag field, after all.
And it turns out that when you click on a label, it's meant to transfer focus to the associated field. So, in Internet Explorer, the tag field never loses focus, so the tag field never closes.
I'd argue that IE is closer to the intent of the spec in this situation. But, in any case, if you really want this behaviour, you'll need to code it yourself with an onclick listener for the label.
When somebody expands "selected list" of our tagfield, than the label gets a onClick Listener. This listener collapses the "selected list" on click on the tagfields label.
listeners: {
expand: function (field) {
// Collapse List when click on Label
field.getEl().el.component.labelEl.on('click', function () {
setTimeout(function () {
field.collapse();
}, 100);
}
);
}
}
Related
I have a popup opening next to the textbox. When I click on the tab key from the textbox it should be navigated to the close icon of the popup (top right corner) and when I click on the close button from the popup, focus should be set to the next control in the form and popup should be closed.
Here is the fiddle
So in fiddle, when I click on the tab from business structure drop down, focus should be set to the close icon(top right corner) and on each next tab it should be move to the next control inside the popup and from close button it focus should be on type dropdown
Its all about the method how to grab a component, which seems to have no connection to another component.
Here the solution is, that you set an alignTarget by using showBy.
Focus:
focus: function(field){
field.popup= Ext.create('tooltip' );
field.popup.showBy(field.el, 'l-r',[10,0]);
},
Listener:
listeners: {
'destroy' : function(win,ev) {
const field = win.alignTargetFly,
next = field.next().component;
next.focus();
}
},
By the pure number of questions you are asking here for the same component (3 or 4 so far), it might be better to grab professional help. Just ask someone to build a component by an image and a short description. This description could be instantly part of your documentation too. This might cost a one day of work.
From what I see so far I would do a custom component, that includes a field.base with the popup. This can be added as a single component to your library and be included instead of your field.
At the end this will be way cleaner in your codebase than what you are currently doing. Just for an example: Always keep the same order for components. After the extend line should be the xtype ... At the end it is easer to read for everyone.
I have a Dropdown, I select a value, lets say "myName", then I have a button that I click and it will display a form to fill with "myName" in one of the fields. But there is a UI issue. When I click that form button it display the form but the Dropdown selected item will disappear.
I tried debugging and it seems there is an issue when rendering it for second time. it fails in a function called commitRoot(root, finishedWork); in react-dom.js file and I don't know what it means as i'm very new in this area.
render() {
return (
<Dropdown
className='titlebar__dropdown'
options={this.myOptions}
onChange={this.selectedNameChanged}
selectedKey={PlanSelector.selectedName}
placeholder='Select a Plan'
/>
before clicking the form:
After clicking, and it doesn't show the options anymore:
You are probably overwriting the state of the property holding the value of the dropdown.
Make sure it is not again set to "" as you must have kept.
On the click of the button, the state is changed and as a result, render() is ran again because of which it is getting overwritten make sure to hold your state when the button is clicked and check if you are changing the state of selectedNameChanged property.
Hopefully, this helps,if not can you please provide the method which is called on button click.
Thanks
I'm using primeng tooltip, and I need to show the tooltip only when the input is invalid. I'm using following code but the tool tip is displayed on hover or on focus.
I have tried using tooltipDisabled and tooltipEvent.
<input type="url" name="url" class="form-control" pattern="(https|http)?://.+"
formControlName="url" [disabled]="flag2" pTooltip="Please enter URL in valid format"
tooltipPosition="left" tooltipEvent="focus">
Expected: Tooltip should be displayed only if input box is invalid
Actual: tooltip is displayed on hover or focus
So the short answer is: no, you can't.
The long answer is: you can show it programatically, but it will also still display through the only options made available by primeNg - onHover and/or onFocus - unless you remove those interactions from the element.
Displaying Tooltip programatically
What you can try and do is force the event that triggers the tooltip on the element on which you have it attached to. There are several ways that can be used to find an element, and that is not your question, but you can find your url input field for example by looking for it on the DOM through its name.
var element = document.getElementsByName("url")[0];
After whichever validation you have fails, you can use that variable to dispatch the event that triggers the tooltip.
element.dispatchEvent(new Event('mouseenter'));
When the element is valid you can make the tooltip disappear by also dispatching the appropriate event.
element.dispatchEvent(new Event('mouseleave'));
As I said above, this will not prevent it from appearing when you hover or focus your input, but it answers your question of how it can be done.
Workaround to prevent standard behaviour
In order to not have the tooltip appear whenever the Element is hovered or focused, I suggest that you actually attach it to another element alltogether. One that you can create and connect right next to your input field, or in it. The important thing is that it is not the field itself that you want to interact with. And then you can use CSS and add to the element with the tooltip no mouse events, for example through a class.
.noPointerEvents {
pointer-events: none;
}
This will ensure that the user won't activate the tooltip with the mouse. And it will only trigger through the previousl given code. You can also disable tabbing, if you selected one element that can be tabbed through.
There is a hack. But it is a hack and I would not recommend this. Since primeng doesn't expose any way to control the tooltip you have to do it by accessing the element manually. Following is one way to do this.
Add two classes to the tooltip using tooltipStyleClass, one class d-none which has display:none !important; property and other class random-class to access the element using jquery or javascript. Using jQuery we will access the element and remove class d-none when the input is invalid. This check has to be implemented in (focus) = 'onFocus()' function.
In the onFocus function remove the d-none class from the tooltip element if the input field is invalid. If the input field is valid then add the d-none class to the element
HTML
<input type="text" pInputText pTooltip="Enter your username" placeholder="Right" tooltipStyleClass="d-none random-class" tooltipEvent="focus" (focus)="onFocus()">
CSS
.d-none {
display: none !important;
}
Javascript/Component
onFocus() {
if (//input field invalid) {
setTimeout(() => {
$('.random-class').removeClass('d-none');
}, 100);
}
}
I cannot stress enough on the fact that this is a hack, I do not recommend this but it gets the job done. If you want to replicate this on other input fields then every field should have different random class name to access that specific element.
Team,
I am having one problem where I donot want to expand combo box on certain flag and want to display the alert message.
there is no event like onClick in EXTJS so I tried with focus event but still combo box is expanding.
code
focus:function() {
if(this.store.baseParams.donotExpandFlag) {
alert("I should not expand this combo");
// What to do here and out side of IF block so that there is conditional expansion
}
}
You need to specifiy your ExtJS version and please format your code.
Here is what you can do for ExtJS4.x
Manually set/unset the isExpanded property. That should work (untested)
for ExtJS3.x you will have to override the the isExpanded() method and in additon apply a custom flag which indicates blocked/auto and get checked before the default code gets executed.
You may try this (untested)
_isExpanded: true, // true means block, false auto
isExpanded: function(){
return this._isExpanded || (this.list && this.list.isVisible());
},
No, this works. See the JSFiddle for ExtJS3.4
Second JSFiddle for ExtJS3.4 with a form
I have a window containing a form (formPanel). Users can show this window clicking on a button in an ExtJS environment. I would like that when the user clicks the button to show the window, a specific field inside the form contained by the window will focus (by this I mean that the cursor should move to that field so that the user can insert data without needing to click on the field itself first).
I tried some solutions, but could not get them work. Any hints?
Here is what I tried, using some examples I found... but it does not work as expected. This function() is called by the ExtJS button in my interface:
function openCardForm(IDUser){
//Reset the value of this field which may be still there from the prev. usage
Ext.getCmp('assignFormCARDNUMBER').reset();
formAssignCard.getForm().load({
url: 'gen/jsonUser.php',
params:{IDUser:IDUser},
waitMsg: 'Loading...'
});
//Try to focus the Card field when rendering the form
Ext.getCmp('assignFormCARDNUMBER').on("render",function(){
Ext.getCmp('assignFormCARDNUMBER').focus(true,10);
});
win.show();
}
try on show instead.
Or Use
defaultButton : yourComponentToFocusOn
A bit confusing but the defaultButton can be any component (not necessary to be an actual button)
You can also try setting the tabindex of the field to zero in its config options...that way you wont even need to add a listener to detect the show event.
ie:
tabIndex:0