I am currently developing an app using angular2 and typescript.
I need to use a range slider input to send a control and i need to know when the input is being used, ie when the user is dragging it.
I tried using a combination of the "mouseup" and "mousedown" event.
When you click the slider the "mousedown" event is triggered and the "isActive" variable is set to true, then when the user stops using the slider the "mouseup" event is triggered and the "isActive" variable is set to false.
<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false" />
That part works perfectly but the fact that I set up an action to do on the "mouseup" event looks to overwrite a native action and the slider is never released.
Here is a simple plunker showing the behavior : https://plnkr.co/edit/PJqFp7dFREog9rE7Shdx
Is it me that do not implement a necessary function to make this work ? or is it a "bug" from angular2 that does not propagate events and just overwrites them ?
Thank you in advance.
https://plnkr.co/edit/KMmJVMhbnmdjVha92S5S?p=preview
I made your code work with wrapping your isActive assignations in method.
Take a look at the plnkr.
The reason why the behaviour differ is because when you do
isActive = true
It returns true, and continue the event bubbling.
And when you do
isActive = false
It returns false, and prevent event from bubbling.
I found a way to make this works. I add a $event.propagate() in the "mouseup" event like this :
<input type="range" (mousedown)="isActive = true" (mouseup)="isActive = false;$event.propagate();" />
But is normal that i have to do that for it to work correctly ? should not the event be propagated automaticaly by angular2 ?
Related
The TextFields in the Material-UI docs has the label which grows and shrinks depending on whether there's a value in the field.
Rather than a user input, I am trying to use JS to reset my TextField to "" when a button is pressed. This means if a user has keyed data into the TextField, if they press the reset button, the field is cleared while the label grows to refill the field.
What is happening is that while my data is cleared, the label remains small.
Where am I going wrong with this?
I've read that it's related to something called shrink, but I dont understand how its called.
A portion of my code, built using Material-UI and ReactJS
EntryField component
<TextField onChange={inputChangedHandler} label={props.label} value={props.value} type={props.type} required={props.required} name={props.name} id={props.id} inputRef={props.propsRef} />
Form component, which uses the EntryField component above, as well as the ReactJS
const refNumRef = useRef();
const [objRefNum, setRefNum] = useState();
(...)
function resetData(event){
setRefNum('')
}
(...)
<EntryField label="Ref Number" type="text" editData={setRefNum} value={objRefNum}
id="input_refNum" name="refNum" propsRef={propRefNumRef} />
So....after posting my question, I made more trial and errors and I somehow managed to get it to work; Im not sure why.
But the main change I made was setting a default to the useState like so
const [objRefNum, setRefNum] = useState("");
And somehow this managed to fix not just this issue with the TextField, but an issue Ive been having with a Select statement as well, where I had trouble resetting it to a default value.
I will eventually have to figure out how to declare this programmatically based on API calls where the default value will change based on the results........but this is fine for now.
I am trying to implement an autocomplete input by using mdc web components. I have a menu selected event listener, where I want to deactivate focus on a textfield. I have tried that by using MDCTextFieldFoundation deactivateFocus method:
const inputFoundation = new MDCTextFieldFoundation(
document.querySelector(".mdc-text-field")
);
menu.listen("MDCMenu:selected", e => {
console.log(inputFoundation);
input.value = e.detail.item.dataset.value;
inputFoundation.deactivateFocus();
});
But, that is not working. In the console, I can also see that input's property isFocused is false, when textfield is still focused. You can see the whole codesandbox here. What am I doing wrong here and what is the correct way of deactivating focus from a textfield?
From docs:
Deactivates the focus state of the Text Field. Normally called in response to the input blur event.
So deactivateFocus updates the state of the component, but it doesn't change focus.
You need to call blur yourself. For example like this:
document.activeElement.blur()
I'm currently trying to do UI that allow me to enter hotkeys for different table rows...
So main idea is to make something like editableCell, where i will input hotkeys.
I already found getKeyComboString method from docs:
http://blueprintjs.com/docs/#core/components/hotkeys.key-combos
But my problem is: how i make something like EditableCell double click ?
i looked in source and found, that editableCell uses Draggable component for this (as i can say), but i can't import it.
so i don't know how should i check if my input looses focus...
Any ideas how to make hotkey input ?
I'v done this using onBlur event and isEditing state.
<div
className={className}
onDoubleClick={this.handleCellDoubleClick}
onBlur={this.handleBlur}
onKeyDown={this.handleKeyDown}
tabIndex={0}
>
{this.state.keyCombo}
</div>
onDoubleClick set state to isEditing: true
onBlur set it to false
onKeyDown works only when isEditing: true
Knockout has the default behavior of updating the associated model if you change your focus (e.g. by clicking outside the input control) after editing the value inside an input control, populated by a binding of type Value.
Here is the link to the official documentation page explanation, section Parameters:
http://knockoutjs.com/documentation/value-binding.html
Do you know a way to disable this default behavior ?
The reason behind this : Im using Models that can tell if their last update requires persistent backup by comparing the previous value to the new one.
I would like to listen to the key up event on my form inputs but if I do that, knockout triggers twice event (the default one + the key up) to update the Model and the second one is basically telling my Model to replace the value by the same value because it is already updated, which it translates to "there is no need to do persistent backup since the value didnt change".
I would gladly appreciate any help or suggestion, since Im stuck and can't find a way around :)
EDIT
Couldnt reproduce the error with bare backbone code. It seems as "super cool" said that valueUpdate should override the default Blur event that triggers when you use form controls with binding Value.
It may be a bug introduced by the library Knockback that I use to create the ViewModel.
Despite all this, just replacing the binding Value by the binding textInput did the trick. Thank you all.
Don't listen to the event, subscribe to updates, which won't fire unless the value is changed. Using the textInput binding will register every change to the value, even those done using menu items like cut and paste, when they happen.
Equivalently, you can use the value binding along with valueUpdate: 'input'
vm = {
myvar: ko.observable(),
updates: ko.observableArray()
};
vm.myvar.subscribe(function(newValue) {
vm.updates.push(newValue);
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myvar" />
<div data-bind="foreach: updates">
<div data-bind="text: $data"></div>
</div>
I'm having difficulty trapping a programmatically triggered click event on a hidden button control from a ASP.NET MVC 4 web app inside a VB6 thick client (which is using a web browser control). I'm able to trap the click event itself using the following:
Private WithEvents WebDoc As HTMLDocument
Private Function WebDoc_onclick() As Boolean
Select Case WebDoc.activeElement.iD
Case "A"
Do something
Case "C"
Do something else
End Select
WebDoc_onclick = True
End Function
And this works just fine if the control is visible. But if the control is invisible:
<div class="HideBtnDiv">
<input id="C" name="NoItems" type="button" class="BtnDiv" style="display:none"/>
</div>
and I try to trigger a programmatic click via one of the following:
$("#C").('click');
$("#C").trigger('click');
$("#C").triggerhandler("click");
$("#C").focus();
$("#C").trigger('click');
I'm getting an empty string for the "id" attribute and as a result I can't distinguish which button was clicked. This button serves no purpose other than to indicate to the VB6 app that a certain criteria has been met and that's the reason why I need it to be hidden. Does anyone have any idea why the id is getting stripped? Or is there any other way to communicate back to the client?
I've also tried filtering by element style using
Select Case WebDoc.activeElement.Style
Case "display:none"
Do something else
End Select
but it came back as "[Object]" so no luck there either. Please let me know if there is a way around this.
Thanks,
Lijin
You seem to have tried several ways of dynamically triggering the click event, but did you try the most obvious way:
$("#C").click();
???
But here is what I would do:
1- Make all of your buttons visible, by removing "display:none" from their style
2- Wrap the buttons you want to hide in a new DIV
3- Set "display:none" style in the newly created DIV
4- You can then trigger the .click() event of any button even if not visible by calling $(id).click();
Thanks, Ahmad. Actually I meant .click() not .('click'). Sorry about that.
Anyway, I tried your suggestion and made the button visible and set the style of the wrapping div to display:none but the id attribute was still coming through as an empty string.
However, I did figure out another way to get this to work. If I keep the wrapping div and button as visible and then focus and click when the condition is met and then do a hide(), my problem is resolved!
$("#C").focus();
$("#C").trigger('click');
$("#C").hide();
The button doesn't get displayed and VB6 still passes the id on the click event. The weird thing is it requires the focus() call to still be made. Without it, I'm back to square one. Not sure if this is a bug.