Merge chips input

Feature #13862

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --cc src/components/chips-input/chips-input.tsx
index ad3d987ad466f9dcf28872f4e87a8a5168d24fd5,6a3142b8851879f232ae816c615cad7025a8b467..171641aee871bc1b61c386c7c30f3274166c8890
--- 1/src/components/chips-input/chips-input.tsx
--- 2/src/components/chips-input/chips-input.tsx
+++ b/src/components/chips-input/chips-input.tsx
@@@ -42,10 -42,10 +42,6 @@@ export const ChipsInput = withStyles(st
          filler = React.createRef<HTMLDivElement>();
          timeout = -1;
  
-         componentWillUnmount (){
-             clearTimeout(this.timeout);
 -        componentDidMount() {
 -            this.updateCursorPosition();
--        }
--
          setText = (event: React.ChangeEvent<HTMLInputElement>) => {
              this.setState({ text: event.target.value });
          }
@@@ -73,17 -73,25 +69,35 @@@
          }
  
          updateCursorPosition = () => {
++            console.log('cursorPoristion');
              if (this.timeout) {
                  clearTimeout(this.timeout);
              }
              this.timeout = setTimeout(() => this.forceUpdate());
          }
  
-         render() {
 -        componentDidUpdate(prevProps: ChipsInputProps<Value>){
 -            if(prevProps.values !== this.props.values){
 -                this.updateCursorPosition();
 -            }
++        getInputStyles = (): React.CSSProperties => ({
++            width: this.filler.current
++                ? this.filler.current.offsetWidth + 8
++                : '100%',
++            right: this.filler.current
++                ? `calc(${this.filler.current.offsetWidth}px - 100%)`
++                : 0,
++
++        })
++
++        componentDidMount() {
 +            this.updateCursorPosition();
+         }
+ 
+         render() {
++            console.log(`Render: ${this.props.values}`);
              return <>
                  <div className={this.props.classes.chips}>
-                     <Chips {...this.props} filler={<div ref={this.filler} />} />
+                     <Chips
+                         {...this.props}
+                         filler={<div ref={this.filler} />}
+                     />
                  </div>
                  <Input
                      value={this.state.text}
@@@ -98,13 -106,13 +112,13 @@@
              </>;
          }
  
--        getInputStyles = (): React.CSSProperties => ({
--            width: this.filler.current
--                ? this.filler.current.offsetWidth + 8
--                : '100%',
--            right: this.filler.current
--                ? `calc(${this.filler.current.offsetWidth}px - 100%)`
--                : 0,
--
--        })
++        componentDidUpdate(prevProps: ChipsInputProps<Value>) {
++            if (prevProps.values !== this.props.values) {
++                console.log('didUpdate');
++                this.updateCursorPosition();
++            }
++        }
++        componentWillUnmount() {
++            clearTimeout(this.timeout);
++        }
      });