onDoubleClick is not working on react to call a function

Question

I'm following this React tutorial here: https://ibaslogic.com/how-to-edit-todos-items-in-react/ to build a simple TO DO app.

I've also reviewed Why onDoubleClick event is not working in React.js? but there's no onclick event to worry about in my example.

My onDoubleClick event should call a function handleEditing but nothing happens when I double click a list item.

I'm unsure of why it does not work (the web browser does not seem to register a double click event.

Below is my example:

import React from "react";
import styles from "./TodoItem.module.css";

class TodoItem extends React.Component {
  state = {
    editing: false,
  };

  handleEditing = () => {
      console.log("doubleClick")
    this.setState({
      editing: true,
    });
  };

  render() {

    const completedStyle = {
      fontStyle: "italic",
      color: "#595959",
      opacity: 0.4,
      textDecoration: "line-through",
    };
    
    const { completed, id, title } = this.props.todo;
    
    let viewMode = {}
let editMode = {}

if (this.state.editing) {
  viewMode.display = "none"
} else {
  editMode.display = "none"
}
    
    return (
      <li className={styles.item}>
        <div onDoubleClick={this.handleEditing} style={viewMode}>
          <input
            type="checkbox"
            className={styles.checkbox}
            checked={completed}
            onChange={() => this.props.handleChangeProps(id)}
          />
          <button onClick={() => this.props.deleteTodoProps(id)}>Delete</button>
          <span style={completed ? completedStyle : null}>{title}</span>
        
        </div>
        <input type="text" style={editMode} className={styles.textInput} />
      </li>
    );
  }
}

export default TodoItem;

I don't think this is relevant, but here is my css:

.item {
    font-size: 1.2rem;
    list-style-type: none;
    padding: 17px 0px;
    border-bottom: 1px solid #eaeaea;
  }
  
  .checkbox {
    margin-right: 15px;
  }
  
  .item button {
    font-size: 13px;
    background: #f1f3f4;
    border: none;
    cursor: pointer;
    float: right;
    outline: none;
    border-radius: 100px;
    height: 50px;
    width: 50px;
    margin: -10px 0 0 10px;
  }


  .textInput {
    width: 100%;
    padding: 10px;
    border: 1px solid #dfdfdf;
  }

Answer 1

Updated answer:

As found out in the comments, the problem was a combination of OS and Browser. Windows / Chrome in this example.

Old answer:

I haven't read into much detail, but the first difference I can spot is that in your code the handleEditing is not bound. Which should not prevent the output of your console.log. Does it appear?

onDoubleClick={this.handleEditing.bind(this)}

Hope this helps in your case.

Answer 2

onDoubleClick works when your dev tool is not opened