To disable the style (box shadow) when input is focused, you can create a class like this:
.nofocus:focus {
box-shadow:none;
}
Then, you can enable the style in your event handlers by removing and adding the class.
For instance, add it in your double click handler:
el.classList.remove('nofocus');
Remove it when the Enter key is pressed in the keydown handler:
if (evt.keyCode === 13) el.classList.add('nofocus');
Extend the blur handler to toggle it (you could also use an isEditing variable to hold the input state and prevent hiding if the input is being edited, based on your workflow logic).
if (!el.classList.contains('nofocus')) el.classList.add('nofocus');
Demo:
.as-console-wrapper { max-height: 10% !important; bottom: 0; }
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cfada0a0bbbcbbbdaebf8ffae1fce1fc">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap Example</title>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617c617c">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<style>
.nofocus:focus {
box-shadow:none;
}
</style>
</head>
<body class="p-3 m-0 border-0 bd-example m-0 border-0">
<input type="text"
class="form-control border-0 p-0 mb-1 nofocus"
onblur="handleBlur(this)"
readonly="true"
ondblclick="handleDbClick(this)"
onkeydown="handleEnter(event, this)"
value="{{ dict.directory.current_name }}" />
<script>
let isEditing = false;
function handleBlur(el) {
console.log('handleBlur');
if(!isEditing) {
if (!el.classList.contains('nofocus')) {
el.classList.add('nofocus');
el.readOnly = 'true';
}
} else {
el.focus();
}
}
function handleEnter(evt, el) {
if(!isEditing) return;
console.log('handleEnter');
el.removeAttribute('readonly');
if (evt.keyCode === 13) {
el.classList.add('nofocus');
el.readOnly = 'true';
isEditing = false;
}
}
function handleDbClick(el) {
isEditing = true;
console.log('handleDbClick');
el.classList.remove('nofocus');
}
</script>
</body>
</html>