Skip to content

Instantly share code, notes, and snippets.

@fanuch
Last active April 23, 2026 16:50
Show Gist options
  • Select an option

  • Save fanuch/1511dd5423e0c68bb9d66f63b3a9c875 to your computer and use it in GitHub Desktop.

Select an option

Save fanuch/1511dd5423e0c68bb9d66f63b3a9c875 to your computer and use it in GitHub Desktop.
Block Click to Edit on Jira Issue
// ==UserScript==
// @name Disable Jira Click Edit
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Disable click edit in Jira issue descriptions
// @author fanuch
// @match https://*.atlassian.net/browse/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @grant none
// ==/UserScript==
/**
* Toggles the double-click-to-edit functionality in Jira issue descriptions.
* The script creates a toggle button that allows the user to enable or disable editing.
* The button uses emoji icons to represent the current state:
* - 🔒 (locked) indicates that editing is disabled
* - ✏️ (pencil) indicates that editing is enabled
*/
(function() {
'use strict';
let isDoubleClickEnabled = false; // Set initial value to false
/**
* Creates the toggle button and inserts it into the Jira issue description UI.
*/
function createToggleButton() {
const listDivs = document.querySelectorAll('div[role="list"]');
if (listDivs.length >= 2 && listDivs[1].firstElementChild) {
const toggleButton = listDivs[1].firstElementChild.cloneNode(true);
toggleButton.textContent = '🔒';
toggleButton.id = 'toggle-button';
toggleButton.addEventListener('click', toggleDoubleClickEdit);
listDivs[1].insertBefore(toggleButton, listDivs[1].firstChild);
}
}
/**
* Toggles the double-click-to-edit functionality when the toggle button is clicked.
* Updates the button icon and adds/removes the event listener on the description element.
*/
function toggleDoubleClickEdit() {
isDoubleClickEnabled = !isDoubleClickEnabled;
const button = document.getElementById('toggle-button');
const descriptionElement = document.querySelector('.ak-renderer-document');
if (isDoubleClickEnabled) {
button.textContent = '✏️';
descriptionElement.removeEventListener('click', handleClick, true);
} else {
button.textContent = '🔒';
descriptionElement.addEventListener('click', handleClick, true);
}
}
/**
* Handles the click event on the Jira issue description element.
* Stops the event propagation to prevent the default double-click-to-edit behavior.
* @param {Event} e - The click event object.
*/
function handleClick(e) {
e.stopPropagation();
console.log("Blocked click-edit of Jira issue description. You're welcome.");
}
// Wait for the Jira issue description UI to load before creating the toggle button
setTimeout(function() {
createToggleButton();
const descriptionElement = document.querySelector('.ak-renderer-document');
if (descriptionElement) {
descriptionElement.addEventListener('click', handleClick, true);
}
}, 200);
})();
@dakrone
Copy link
Copy Markdown

dakrone commented Aug 29, 2024

Thank you for this!

@marvk
Copy link
Copy Markdown

marvk commented Jul 4, 2025

Doesn't work anymore 😢

@fanuch
Copy link
Copy Markdown
Author

fanuch commented Jul 7, 2025

@marvk unfortunately, Atlassian have a habit of making terrible JIRA UI changes that break user scripts 😢

I will update the script when I have a chance

@lgescobar
Copy link
Copy Markdown

I made a try to adapt it.

// ==UserScript==
// @name         Disable Jira Click Edit
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Disable click edit in Jira issue descriptions
// @author       fanuch
// @match        https://*.atlassian.net/browse/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @grant        none
// ==/UserScript==

/**
 * Toggles the double-click-to-edit functionality in Jira issue descriptions.
 * The script creates a toggle button that allows the user to enable or disable editing.
 * The button uses emoji icons to represent the current state:
 * - 🔒 (locked) indicates that editing is disabled
 * - ✏️ (pencil) indicates that editing is enabled
 */
(function() {
    'use strict';

    let isDoubleClickEnabled = false; // Set initial value to false
    let initialized = false;

    /**
     * Creates the toggle button and inserts it into the Jira issue description UI.
     */
    function createToggleButton() {
        const listDivs = document.querySelectorAll('nav[aria-label="Actions"] [role="list"]');

        if (listDivs.length > 1) {
            console.error('Cannot locate actions item list');
        } else if (listDivs[0].firstElementChild) {
            const toggleButton = document.createElement('div');
            toggleButton.id = 'toggle-button';
            toggleButton.setAttribute('role', 'listitem');
            toggleButton.textContent = '🔒';
            toggleButton.style.cursor = 'pointer';
            toggleButton.addEventListener('click', toggleDoubleClickEdit);
            listDivs[0].insertBefore(toggleButton, listDivs[0].firstChild);
        }
    }

    /**
     * Toggles the double-click-to-edit functionality when the toggle button is clicked.
     * Updates the button icon and adds/removes the event listener on the description element.
     */
    function toggleDoubleClickEdit() {
        isDoubleClickEnabled = !isDoubleClickEnabled;
        const button = document.getElementById('toggle-button');

        const descriptionElement = document.querySelector('[data-editor-container-id="issue-description-editor"]');

        if (isDoubleClickEnabled) {
            button.textContent = '✏️';
            descriptionElement.removeEventListener('click', handleClick, true);
        } else {
            button.textContent = '🔒';
            descriptionElement.addEventListener('click', handleClick, true);
        }
    }

    /**
     * Handles the click event on the Jira issue description element.
     * Stops the event propagation to prevent the default double-click-to-edit behavior.
     * @param {Event} e - The click event object.
     */
    function handleClick(e) {
        e.stopPropagation();
        console.log("Blocked click-edit of Jira issue description. You're welcome.");
    }

    function processMutations(mutations) {
        if (initialized) {
            observer.disconnect();
            return;
        }

        mutations.forEach(mutation => {
            if( document.querySelector('[data-editor-container-id="issue-description-editor"]') ) {
                initialize();
            }
        });
    }

    const observer = new MutationObserver(processMutations);
    window.debugMutationObserver = observer;

    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });

    function initialize() {
        if (initialized) {
            observer.disconnect();
            return;
        }

        initialized = true;
        observer.disconnect();
        createToggleButton();

        const descriptionElement = document.querySelector('[data-editor-container-id="issue-description-editor"]');
        if (descriptionElement) {
            descriptionElement.addEventListener('click', handleClick, true);
        }
    }
})();

Feel free to test it.

@gukandrew
Copy link
Copy Markdown

зображення

Modifed it a bit for new elements structure on Jira:

// ==UserScript==
// @name         Disable Jira Click Edit
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Disable click edit in Jira issue descriptions
// @author       fanuch
// @match        https://*.atlassian.net/browse/*
// @match        https://*.atlassian.net/jira/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
// @grant        none
// ==/UserScript==

/**
 * Toggles the double-click-to-edit functionality in Jira issue descriptions.
 * The script creates a toggle button that allows the user to enable or disable editing.
 * The button uses emoji icons to represent the current state:
 * - 🔒 (locked) indicates that editing is disabled
 * - ✏️ (pencil) indicates that editing is enabled
 * Taken from https://gist.github.com/fanuch/1511dd5423e0c68bb9d66f63b3a9c875 and customised
 * to work on /jira/ as well as just /browse/.
 * Also moved button from next to top search bar to next to Description heading
 */
(function() {
    'use strict';
    let isDoubleClickEnabled = false; // Set initial value to false

    /**
     * Creates the toggle button and inserts it into the Jira issue description UI.
     */
    function createToggleButton() {
        const parentDiv = document.querySelector('[data-testid="issue.views.issue-base.common.description.label"]').firstElementChild.firstElementChild;
        if (parentDiv && parentDiv.firstElementChild) {
            const toggleButton = parentDiv.firstElementChild.cloneNode(true);
            const editorDiv = document.querySelector('[data-testid="issue.views.field.rich-text.editor-container"]');
            if(editorDiv){
                //editor is already opened
                isDoubleClickEnabled = true;
                toggleButton.textContent = '✏️';
            }else{
                toggleButton.textContent = '🔒';
            }
            toggleButton.id = 'toggle-edit-desc-button';
            delete toggleButton.dataset.testid;
            toggleButton.removeAttribute("class");
            toggleButton.style.cursor = "pointer";
            toggleButton.style.paddingLeft = "5px";
            toggleButton.addEventListener('click', toggleDoubleClickEdit);
            parentDiv.firstElementChild.before(toggleButton);
            parentDiv.style.justifyContent = 'unset';
        }
    }

    /**
     * Toggles the double-click-to-edit functionality when the toggle button is clicked.
     * Updates the button icon and adds/removes the event listener on the description element.
     */
    function toggleDoubleClickEdit() {
        isDoubleClickEnabled = !isDoubleClickEnabled;
        const button = document.getElementById('toggle-edit-desc-button');
        const descriptionElement = document.querySelector('.ak-renderer-document');

        if (isDoubleClickEnabled) {
            button.textContent = '✏️';
            descriptionElement.removeEventListener('click', handleClick, true);
        } else {
            button.textContent = '🔒';
            descriptionElement.addEventListener('click', handleClick, true);
        }
    }

    /**
     * Handles the click event on the Jira issue description element.
     * Stops the event propagation to prevent the default double-click-to-edit behavior.
     * @param {Event} e - The click event object.
     */
    function handleClick(e) {
        e.stopPropagation();
        console.log("Blocked click-edit of Jira issue description. You're welcome.");
    }

    function watchForElement(selector, callback) {
        /// Keep track of elements we've already processed
        const processedElements = new WeakSet();

        // First check if element exists
        const element = document.querySelector(selector);
        if (element && !processedElements.has(element)) {
            processedElements.add(element);
            const existingButton = document.getElementById('toggle-edit-desc-button');
            if(!existingButton){
                callback(element);
            }
        }

        // Set up observer
        const observer = new MutationObserver(mutations => {
            const element = document.querySelector(selector);
            if (element && !processedElements.has(element)) {
                processedElements.add(element);
                 const existingButton = document.getElementById('toggle-edit-desc-button');
                if(!existingButton){
                    callback(element);
                }
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        return observer;
    }

    // Wait for the Jira issue description UI to load before creating the toggle button
    watchForElement('div.ak-renderer-document', descriptionDiv => {
        createToggleButton();
        descriptionDiv.addEventListener('click', handleClick, true);
    });
})();

@tpit-transdev
Copy link
Copy Markdown

Sadly all of these don't work anymore. I've dug deep into my soal and went on with my basic jscript knowledge and the help of F12 / console / chatgpt.com

Below is working as per today: september 9th 2025

// ==UserScript==
// @name         Jira Disable Inline Edit with Toggle
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Toggle click-to-edit on Jira issues including title and body
// @author       You
// @match        https://transdev-nl.atlassian.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ----------------------
    // Config
    // ----------------------
    const bodySelector = '.ak-renderer-document';
    const titleSelector = 'h1[data-testid="issue.views.issue-base.foundation.summary.heading"]';

    let editBlocked = true; // start met blokkeren

    // ----------------------
    // Toggle knop toevoegen
    // ----------------------
    function addToggleButton() {
        const header = document.querySelector('#jira-issue-header'); // parent element voor knop
        if (!header) return;

        if (document.getElementById('edit-block-toggle')) return; // knop al aanwezig

        const btn = document.createElement('button');
        btn.id = 'edit-block-toggle';
        btn.innerText = editBlocked ? '🔒' : '🔓';
        btn.style.marginLeft = '10px';
        btn.style.cursor = 'pointer';
        btn.title = 'Toggle Click-to-Edit Block';

        btn.addEventListener('click', () => {
            editBlocked = !editBlocked;
            btn.innerText = editBlocked ? '🔒' : '🔓';
            console.log('[Jira-edit-block] Edit mode', editBlocked ? 'blocked' : 'allowed');
        });

        header.appendChild(btn);
    }

    // ----------------------
    // Click-to-edit blokkeren
    // ----------------------
    function blockClicks(e) {
        if (!editBlocked) return;

        if (e.target.closest(bodySelector) || e.target.closest(titleSelector)) {
            e.stopImmediatePropagation();
            e.preventDefault();
            console.log('[Jira-edit-block] Click-to-edit blocked on', e.target);
        }
    }

    // ----------------------
    // Observer om pagina wijzigingen te volgen
    // ----------------------
    const observer = new MutationObserver(() => {
        addToggleButton();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Event listener voor blokkeren
    document.addEventListener('click', blockClicks, true); // capture=true zodat we eerder zijn dan Jira

})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment