JavaScriptDude/jquery_dialog_focus_test.html

## jquery_dialog_focus_test.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Focus Test</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js" integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <script>

    function funcName(f){var s = f.toString(), m = s.match("^\\s*function\\s*(\\S*)\\s*\\((.*)\\)");if (m.length > 1) return m[1];return null;}
    function _called(){console.log(funcName(arguments.callee.caller) + "() called: ")}

    $( function() {
        $( "#dialog-confirm1" ).dialog({
            height: "auto",
            width: 400,
            position: { my: "center", at: "top", of: window },
            focus: function dialog1_focus(){
                _called()
                $("#btCancel1").focus()
            },
            buttons: [{
                text: "Ok",
                id: "btOk1",
                click: function ok1_click() {_called()}
            },{
                text: "Cancel",
                id: "btCancel1",
                click: function cancel1_click() {_called()}
            }]
        });
    });


    $( function() {
        $( "#dialog-confirm2" ).dialog({
            height: "auto",
            width: 400,
            position: { my: "center", at: "bottom", of: window },
            focus: function dialog2_focus(){
                _called()
                $("#btOk2").focus()
            },
            open: function dialog2_open(event, ui){
                _called()
                //   return
                //   var focus_in_orig = (jQuery._data(this.parentNode, "events")["focusin"].pop()).handler, t=this

                //   this.parentNode.removeEventListener("focusin", focus_in_orig)

                //   this.parentNode.addEventListener("focusin", function dialog2_focusin(event){
                //     _called()
                //     //   debugger
                //     //   focus_in_orig(event)
                //   })

                console.table(jQuery._data(this.parentNode, "events"))
                console.table(jQuery._data(this, "events"))
                //   debugger

                this.parentNode.focus()
            },
            buttons: [{
                text: "Ok",
                id: "btOk2",
                click: function ok2_click() {_called()}
            },{
                text: "Cancel",
                id: "btCancel2",
                click: function cancel2_click() {_called()}
            }]
        });
    });


    setTimeout(()=>{
        setTimeout(()=>{$("dialog-confirm1").focus()}, 1000)
        setTimeout(()=>{$("dialog-confirm2").focus()}, 2000)
    }, 2000)
  </script>
</head>
<body>
    <div id="dialog-confirm1" title="~ dialog title ~"><p>~ dialog body ~</p></div>
    <div id="dialog-confirm2" title="~ dialog title ~"><p>~ dialog body ~</p></div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery UI Dialog - Focus Test</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
	<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.2/underscore-min.js" integrity="sha512-anTuWy6G+usqNI0z/BduDtGWMZLGieuJffU89wUU7zwY/JhmDzFrfIZFA3PY7CEX4qxmn3QXRoXysk6NBh5muQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

	<script>

	function funcName(f){var s = f.toString(), m = s.match("^\\sfunction\\s(\\S)\\s\\((.*)\\)");if (m.length > 1) return m[1];return null;}
	function _called(){console.log(funcName(arguments.callee.caller) + "() called: ")}

	$( function() {
	$( "#dialog-confirm1" ).dialog({
	height: "auto",
	width: 400,
	position: { my: "center", at: "top", of: window },
	focus: function dialog1_focus(){
	_called()
	$("#btCancel1").focus()
	},
	buttons: [{
	text: "Ok",
	id: "btOk1",
	click: function ok1_click() {_called()}
	},{
	text: "Cancel",
	id: "btCancel1",
	click: function cancel1_click() {_called()}
	}]
	});
	});


	$( function() {
	$( "#dialog-confirm2" ).dialog({
	height: "auto",
	width: 400,
	position: { my: "center", at: "bottom", of: window },
	focus: function dialog2_focus(){
	_called()
	$("#btOk2").focus()
	},
	open: function dialog2_open(event, ui){
	_called()
	// return
	// var focus_in_orig = (jQuery._data(this.parentNode, "events")["focusin"].pop()).handler, t=this

	// this.parentNode.removeEventListener("focusin", focus_in_orig)

	// this.parentNode.addEventListener("focusin", function dialog2_focusin(event){
	// _called()
	// // debugger
	// // focus_in_orig(event)
	// })

	console.table(jQuery._data(this.parentNode, "events"))
	console.table(jQuery._data(this, "events"))
	// debugger

	this.parentNode.focus()
	},
	buttons: [{
	text: "Ok",
	id: "btOk2",
	click: function ok2_click() {_called()}
	},{
	text: "Cancel",
	id: "btCancel2",
	click: function cancel2_click() {_called()}
	}]
	});
	});


	setTimeout(()=>{
	setTimeout(()=>{$("dialog-confirm1").focus()}, 1000)
	setTimeout(()=>{$("dialog-confirm2").focus()}, 2000)
	}, 2000)
	</script>
	</head>
	<body>
	<div id="dialog-confirm1" title="~ dialog title ~"><p>~ dialog body ~</p></div>
	<div id="dialog-confirm2" title="~ dialog title ~"><p>~ dialog body ~</p></div>
	</body>
	</html>