Properly disable React tags box in read-only mode

chrome/content/zotero/components/editable.jsx

@@ -80,10 +80,10 @@ class Editable extends React.PureComponent {
 	}
 
 	render() {
-		const { isDisabled } = this.props;
+		const { isDisabled, isReadOnly } = this.props;
 		return (
 			<div
-				tabIndex={ isDisabled ? null : this.isActive ? null : 0 }
+				tabIndex={ (isDisabled || isReadOnly) ? null : this.isActive ? null : 0 }
 				onClick={ event => this.props.onClick(event) }
 				onFocus={ event => this.props.onFocus(event) }
 				onMouseDown={ event => this.props.onMouseDown(event) }

chrome/content/zotero/components/itemPane/tagsBox.jsx

@@ -85,6 +85,9 @@ const TagsBox = React.forwardRef((props, ref) => {
 	}
 	
 	function handleEdit(event) {
+		if (!props.editable) {
+			return;
+		}
 		if (skipNextEdit.current) {
 			skipNextEdit.current = false;
 			return;
@@ -349,13 +352,13 @@ const TagsBox = React.forwardRef((props, ref) => {
 						title={title}
 						tooltiptext={title}
 						style={{ width: "16px", height: "16px" }}
-						onClick={() => setSelectedTag(tag.tag)}
+						onClick={props.editable ? (() => setSelectedTag(tag.tag)) : undefined}
 				/>
 				<div className="editable-container" style={style}>
 					<Editable
 						autoComplete={!isMultiline}
 						autoFocus
-						className={cx({ 'zotero-clicky': !selected })}
+						className={cx({ 'zotero-clicky': props.editable && !selected })}
 						getSuggestions={getFilteredSuggestions}
 						inputComponent={isMultiline ? TextAreaInput : Input}
 						isActive={selected}
@@ -408,16 +411,16 @@ const TagsBox = React.forwardRef((props, ref) => {
 		<div className="tags-box" ref={rootRef} onClick={blurOpenField}>
 			<div className="tags-box-header">
 				<div className="tags-box-count">{renderCount()}</div>
-				<div><button onClick={handleAddTag}>Add</button></div>
+				{ props.editable && <div><button onClick={handleAddTag}>Add</button></div> }
 			</div>
 			<div className="tags-box-list-container">
 				<ul className="tags-box-list">
 					{displayTags.map(tag => renderTagRow(tag))}
 				</ul>
-				<span
+				{ props.editable && <span
 					tabIndex="0"
 					onFocus={handleAddTag}
-				/>
+				/> }
 			</div>
 		</div>
 	);

chrome/content/zotero/containers/tagsBox.xul

@@ -30,7 +30,8 @@
 
 <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 	<popupset>
-		<menupopup id="tags-context-menu">
+		<menupopup id="tags-context-menu"
+				onpopupshowing="return ZoteroItemPane.onTagsContextPopupShowing()">
 			<menuitem id="remove-all-item-tags" label="&zotero.item.tags.removeAll;"
 				oncommand="ZoteroItemPane.removeAllTags()"/>
 		</menupopup>

chrome/content/zotero/itemPane.js

@@ -324,6 +324,13 @@ var ZoteroItemPane = new function() {
 	}
 	
 	
+	this.onTagsContextPopupShowing = function () {
+		if (!_lastItem.editable) {
+			return false;
+		}
+	}
+	
+	
 	this.removeAllTags = async function () {
 		if (Services.prompt.confirm(null, "", Zotero.getString('pane.item.tags.removeAll'))) {
 			_lastItem.setTags([]);