I am building a nested form framework that uses the redux form and material ui framework -- I've built the components here to date - <https://codesandbox.io/s/heuristic-hopper-lzekw>

what I would like to do - is append some "animation" to the fields - to mimick typing -- I've achieved this by a little function that will take the initial text and step through the chars -- updating the prop of the initial values for that field.

[![enter image description here](https://i.stack.imgur.com/f5rUA.png)](https://i.stack.imgur.com/f5rUA.png)

Now the problem I have -- is I need to create an onClick on the textField -- and if its an automated typetext field - reset the value to an empty string -- pass this onclick back up to the parent shells -- and even back up to the typetext function to break the timeout --- so if the user loads the page they see the text typing - but with UI functionality improvements - if I click on the field during mid-animation - I want the animation to stop/break, I want the field to clear.

I want to have control over also which fields should be cleared -- so in this case - have a param - that indicates onClickClear: true -- so as not to break user edit profile pre-filled forms.

===sandbox with no typetext -- but a good base for how to glue these two frameworks together
<https://codesandbox.io/s/heuristic-hopper-lzekw?file=/src/Home.js>

== this is the latest sandbox with auto typing as it currently is
<https://codesandbox.io/s/amazing-bell-z8nhf>

```
var self = this;
typeAnimation(this.state.initial_search_term.search_term, 100, function(msg){
  self.setState({
    initial_search_term: {"search_term": msg}
  });
});

```