I have a textarea from which I want to catch a shift-enter event, which is pressed inside it.
enter as well as shift-enter both call the save method of the controller. But inside the save method, I don't seem to have an param giving me the pressed key(number).
When I implement the keyUp: (e) -> method inside my view(controller), it either not called when the save method is implemented inside the controller, or, when the save method is not implemented, I get an error saying nothing handled the action save.
Actually I only want to know if the pressed key(s), which called the save action was either enter or shift-enter.
What's the best way to do this? Thanks!
Update
My code looks like this now:
ContactIndex = Ember.View.extend
listenKey: ((event) ->
if(event.which == 13)
#get('controller').send('save', event.shiftKey)
).on('keyDown') # When I use `keyUp` instead, the isShift boolean value is not being transmitted.
Contact = Ember.ObjectController.extend
save: (isShift) ->
console.log('Shift Key Pressed: ' + isShift)
false
Every time I press enter or shift-enter, the save action gets called twice.
its better to pass a boolean value whether its a shift key event or not from the view to controller.
App.IndexController=Ember.Controller.extend({
actions: {
save: function(isShift){
console.log('Shift Key Pressed: ' + isShift);
return false;
}
}
});
App.IndexView=Ember.View.extend({
listenKey: function(event){
if(event.which===13){
this.get('controller').send('save',event.shiftKey);
}
}.on('keyUp')
});
Check this jsbin http://emberjs.jsbin.com/fazibu/1/edit
Related
I have both a text input and a dropdown that allows additions (both use the Form.xxx version). For both of these, I would like to add an x icon on the right, that when clicked, will either call a handler or will clear the input's value.
Is this possible in semantic-ui-react?
Thank you
I did find a solution, which I will share, but this means I can no longer have my lock icon on the left hand side, because an input can only have one icon.
What I've done is to use an Icon element, and add an onClick handler to that, as follows:
<Input ...
icon={<Icon name='delete' link onClick={this.handleDeleteClick}/>}/>
(Updated)
To clear the field, there is no "semantic-ui-react" shortcut as far as I know.
However, you can do this manually using your component state.
Here would be an example of this:
class ExampleClearField extends Component {
state = {}
handleChange = (e, { name, value }) => this.setState({ [name]: value })
handleClear = () => this.setState({ email: ''})
render() {
const { email } = this.state
return (
<Form.Input iconPosition='left' name="email />
<Icon name='x' link onClick={this.handleClear} />
<input/>
</Form.Input>
)
}
}
** Notice the link, which is needed for Icon to accept onClick.
Also, dont't forget about (you might need to change it's place depending on iconPostion)
As of Semantic UI React 0.83.0, it is possible to do this with Dropdowns using clearable. You cannot add your own event handler to the "x" by using this. Clicking the "x" will simply clear the selected value and call onChange with the new empty value.
Example from their docs:
const DropdownExampleClearable = () => <Dropdown clearable options={options} selection />
See the example output on their docs page here
I have a scenario where I have 2 profiles (user and admin) and I have a selection page once a person logs in. On the selection page, there are 2 radio buttons for (User and Admin profiles), what I am trying to achieve is, the person can choose only 1 profile (this is achieved by the radio button), now assuming I have saved the selected value, I want to set the rootPage to AdminPage or UserPage, but I don't want to immediately navigate, I just want to update/set the path so that when the person goes back (by pressing the back key or previous button) it will take the person to the desired page. Please let me know your thoughts.
Maby this will put you in the right direction:
https://ionicframework.com/docs/api/navigation/NavController/#insert
do not set adminPage or userPage as rootPage but insert the page on the stack
The trick here is that you want to set the root to a new page after the user tries to go back, the easiest way to achieve this is using the NavController navguards to execute a code before leaving the page, this way it'll check wich page the user has selected and then set the root.
Since the select can be easy impemented following the docs i'll leave that aside. Let's just say you have a property userType that is a string and can be 'user' or 'admin', in your select page you'll do the following:
public canLeave: boolean = false; //this'll controll if the user can leave the page or not
public userType: string = 'user'; // just setting a default value to your select
// this is a navguard
ionViewCanLeave() {
if(!this.canLeave){
if(this.userType == 'user'){
this.canLeave = true; // you'll need to set canLeave to true so when setting the rootpage it doesn't enters the if statemente again
this.navCtrl.setRoot('UserPage');
} else {
this.canLeave = true;
this.navCtrl.setRoot('AdminPage');
}
}
return true;
}
Hope this helps.
I got the solution to the error,
ionViewCanLeave() {
if(!this.canLeave){
if(this.userType == 'user'){
this.canLeave = true; // you'll need to set canLeave to true so when setting the rootpage it doesn't enters the if statemente again
this.navCtrl.setRoot('UserPage'); // <-- this should be UserPage instead of 'UserPage'
} else {
this.canLeave = true;
this.navCtrl.setRoot('AdminPage'); // <-- this should be AdminPage instead of 'AdminPage'
}
}
return true;
}
I've been stuck on this issue for about a week now, and I am not exactly sure how to solve it.
What I am trying to do is set the focus of ember-power-select from triggering an
I am currently able to set focus to the power select via tabbing or clicking, however I can't seem to gain its focus from another action.
(Like the hacky way I can think of is to call handleFocus directly and pass a select object)
In Component.hbs:
{{#power-select
class='ls-search-box'
options=searchList
selected=selected
onfocus=(action "handleFocus") as |item|
}}
In Component.js:
actions: {
handleFocus(select, e){
select.actions.open()
},
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box");
if(input) {
input.focus();
}
}
}
Any know what I should do?
You need to change focusSearch like :
focusSearch(){
//console.log('focus Search');
var input = Ember.$(".ls-search-box > .ember-power-select-trigger");
if(input) {
input.focus();
}
}
You used a wrong css selector
When I trying to add a new record for a One2many tree, I've got a new pop up from(like the image below), I've need validate every value added to the tree, for that, I used onchange methods but they don't work properly...I would like override the method called when I click over the 'Save & Close' button, I tried overriding the write method, but in this way I don't have so many control over the error message what I want show for every single record added. I'm sure the best way to do what I need is get the name for method called when I clicked over the Save & Close method(In other words what method send the values from popup from to the One2many tree?). Please please HELPPP ME!
EDIT: Or how can I call a specific from(wizard) clicking on Add an item???
Call method on Button "Save & Close"
Add Js in module and do like this.
In js file:
openerp.module_name = function(instance) {
var QWeb = openerp.web.qweb;
_t = instance.web._t;
instance.web.FormView.include({
load_form: function(data) {
var self = this;
this.$el.find('.oe_abstractformpopup-form-save').click(this.on_button_save);
return self._super(data);
},
on_button_save: function() {
this.dataset.index = null;
this.do_show();
console.log('Save & Close button method call...');
},
});
};
I'm not sure if I'm doing something wrong, if there's something broken about filter_horizontal, or if my expectations of the way it should behave are wrong. Any insights appreciated!
In my mind, when you use filter_horizontal, type a few characters into the text box to narrow down your choice such that there's a single item, and hit enter, it should:
Add the item to the selected list
clear your entered text (allowing you to add another).
What it actually does is:
Add your item to the selected list
Keep the text in the filter box
Submit the form, without saving your new selection
Am I doing something wrong? Is this the behaviour everyone sees? Is there a way to work around this?
I'm using Django 1.2.3, and I've tested this in Chrome 8.0.552.237, Firefox 3.6.13, and IE 8.
I can confirm the behavior on Django 1.2.1.
Problem:
It looks like admin/js/SelectFilter2.js registers a key up handler to do the filtering. This handler also returns false if the key was the enter key, which tries to cancel the form submit.
From admin/js/SelectFilter2.js line 85 or so:
// don't submit form if user pressed Enter
if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {
from.selectedIndex = 0;
SelectBox.move(field_id + '_from', field_id + '_to');
from.selectedIndex = 0;
return false;
}
This seemed fine to me, so I added an event handler at the end of the init method to catch the form's submit event:
addEvent(document.forms[0], 'submit', function(event) {
console.log("Form submitted");
}
After doing that, it's clear that submit fires before the keyUp event. Thus, pressing enter submits the form, and the keyUp event never gets to the field.
Workaround:
I was able to work around the behavior by discarding all enter keyUp's on the form itself. Add this to the end of the init method in SelectFilter2.js:
addEvent(document.forms[0], 'keyup', function(event) {
if (event.keyCode && event.keyCode == 13) {
return false;
}
});
This is the quick and dirty way to fix the problem, but the form event fires after the field's event, so it seems to work. But it also stops the enter key from submitting the form everywhere else too.
This should probably be filed as a django bug.