Blur on clear all values with React-Select - react-select

Does anyone know how to blur the element after the clear all values has been clicked?
There isn't a prop that allows me to capture the clear all click except for the onChange.
The clear all method calls focus and overrides my blur unless I timeout for 600+ seconds and then call blur...but there has to be a better way.
thanks

Related

Stop Vue Fireworks animation

I'm using the vue-fireworks component (https://github.com/dampion/Vue-fireworks) to display an HTML5 Canvas animation of fireworks. It starts when the component is mounted which is fine. But I can't figure out how to make it stop. I need to stop the fireworks after a button click. I'd prefer that no more fire off and any that are onscreen when the button is clicked are allowed to continue to their conclusion.
Are you able to modify the source code of the Fireworks component?
I can see that it has a data prop of auto that is set to true.
If you could change that to a straight forward prop, then by changing that value to false it would stop adding more fireworks and let the other animations finish.
<Firework :boxHeight="'100%'" :boxWidth="'100%'" :auto="false"/>
Haven't tested myself, just an assumption reading through the code. Hope it helps.

Unable to see the dropdown of a inputText box it hid behind the keyboard in react-native-keyboard-aware-scroll-view

I am using react-native-keyboard-aware-scroll-view to see the input box above the keyboard. It working fine.
But one of my input boxes has a dropdown. It is hidden behind the keyboard. I have tried setting the margin values. It did not work for me.
Any solution for this
React Native's EditText has theisFocused ()props that checks to see if it is focused.
You can call a function that raises your list when EditText is in focus, and to go down when focus is false.
Use a Timeout because otherwiseEditText will not go at the same time as your list.
Not a good solution I know, but you can also try this with animation to improve it a bit.

Bootstrap native: override setFocus on dropdown handling

Aside from forking the library, is there a way to override/disable setFocus in the private show and hide methods of the dropdown?
I am using the dropdown for a mini-cart on a sticky navbar. When an item is added I'd like the dropdown to open (which works fine) but the focus is jumping to the top of the page on show and hide. I realize this is a feature and not a bug! But for this feature I want to keep any scrolling from occurring.
The only thing you can do is to is to hook into the shown.bs.dropdown and hidden.bs.dropdown events and set a different focus element after a 20ms timeout, but this is very confusing for users who use or only use keyboard navigation.

React Native: ScrollView with auto scroll

I would like to create a carousel that scrolls automatically until the user scrolls / touches the ScrollView itself.
The auto-scrolling itself works fine with using scrollView.scrollTo but how could I detect if the user is interacting with the ScrollView? I took a look at the onScroll event but this does not seem to distinct between a user generated event and an event that was generated by calling scrollTo.
Also I'd like to know if it is possible to get the current scroll position from the ScrollView directly instead of reading it everytime from the onScroll event.
I'm very thankful for any tips and suggestions.
By digging into ScrollView's source code you can notice a few undocumented callbacks that will help you achieve what you're after, namely onTouchStart and onTouchEnd. These two callbacks are triggered only when user interacts with the ScrollView and not when you scroll programmatically.
You will probably want to clear your auto-scroll interval on onTouchStart and restart it after a delay on onTouchEnd.
Regarding your next question, the answer is no. As far as I know, no getter is currently exposed to retrieve the current scroll position. Therefore, you need to rely on the event passed to onScroll, retrieve event.nativeEvent.contentOffset['x' or 'y'], and store it in your component's state.
Note that if you're doing some heavy animations that need to follow scroll position closely (e.g. animated header or parallax image), it would be a good idea to use the native driver for Animated.event. You can learn more about it on React Native's blog.

Titanium editing textField in a listView

I have a listView that has a textField in the item template. To make sure that the listView saves the data I have used the code from this link it works in that it saves the data to the listView item but it looses focus every time the onChange event fires the updateItemAt method so the keyboard disappears after every key press.
I have tried onBlur but I then get the original text flashing up before it is replaced with the new text from the blur event.
Is there a way to stop loosing focus when the updateItemAt listView method is fired?
No, there is not, because by updateItemAt you are re-rendering that row.
Also, its not a best practice to store data in proxy objects. Better store the data in the data collection that drives your listview or a separate object/array.