Trying to get textarea input working in custom renderer

Tags: #<Tag:0x00007efc61c94a00>
#1

Below is the full code of a simple customrenderer I’m using. The idea is simple, the editor should be a textarea versus the standard input. When the user double clicks, or hits enter, the editor comes up, and I’m using a reference so that I can set the focus in the TextArea when it opens. This works great.

The issue is the difference between if a user hits the “enter” key to edit mode, or they double click to enter edit more.

If they use the “enter” key, if they then click the “backspace” key, it deletes the entire cell, as if they clicked backspace when in render mode. If they double click, however, it works as expected.
Also note, if they hit enter key to enter edit mode, and then click in the textarea with the mouse, it behaves correctly as well.

Is there something I can do so that a user can hit enter to bring up edit mode, and still use backspace/enter key in the textarea without the causing the issues mentioned? It almost seems like the grid still thinks it’s in render mode.
Thx

import React from "react";
import NativeListener from "react-native-listener";
import { BaseEditorComponent } from "@handsontable/react";
import {Input,Button,Form,TextArea} from 'semantic-ui-react';

class TextEditor extends BaseEditorComponent {
  constructor(props) {
   super(props);

this.mainElementRef = React.createRef();
this.textInput = React.createRef();
this.containerStyle = {
  display: "none",
  position: "absolute",
  left: 0,
  top: 0,
  background: "#fff",
  border: "1px solid #000",
  padding: "0px",
  zIndex: 999,
  width: '125px',
};

this.state = {
    value: "",
    width:'125px',
    top:0,
    left:0,
    display:'none',
  };

}

  componentDidMount(){
   this.textInput.current.focus();
} 

 setValue(value, callback) {
 this.setState((state, props) => {
   return { value };
  }, callback);
}

   getValue() {
  return this.state.value;
}

 open() {

this.mainElementRef.current.style.display = "block";
this.textInput.current.focus();    
// this.setState({display:'block'})

}

close() {
if(this.mainElementRef.current) this.mainElementRef.current.style.display = “none”;
// this.setState({display:‘none’})
}

prepare(row, col, prop, td, originalValue, cellProperties) {
// We’ll need to call the prepare method from
// the BaseEditorComponent class, as it provides
// the component with the information needed to use the editor
// (hotInstance, row, col, prop, TD, originalValue, cellProperties)
super.prepare(row, col, prop, td, originalValue, cellProperties);

const tdPosition = td.getBoundingClientRect();
this.setState({width:cellProperties.width,top:`${tdPosition.top}px`, left:`${tdPosition.left}px`})

// As the `prepare` method is triggered after selecting
// any cell, we're updating the styles for the editor element,
// so it shows up in the correct position.

this.mainElementRef.current.style.left = `${tdPosition.left  }px`;
this.mainElementRef.current.style.top = `${tdPosition.top  }px`;

}

updateText=()=> {
const {value} = this.state;
this.setState(
(state, props) => {
return { value};
},
() => {
this.finishEditing();
},
);
}

// eslint-disable-next-line class-methods-use-this
stopMousedownPropagation(e) {
e.stopPropagation();
}

render() {
const {value,width} = this.state;
return (

      <Form>
        <TextArea ref ={ this.textInput } style={{width,height:'200px'}} onChange={(e,data) 
  =>this.setState({value: data.value})} value={value} placeholder="Enter Text"/>
      </Form>

     </div>
  </NativeListener> 
  );
}
}  

 export default TextEditor
#2

never mind, right after I posted this, found the solution! I just added onKeyDown={this.stopMousedownPropagation} in the customRenderer and that worked.

2 Likes
#3