Form elements don't respond when borderless WebView set

tinomatic commented 3 years ago

Expected Behavior
Form elements behave consistently when "borderless": true is set in neutralino.config.json. For example, input fields should get focus when clicked and allow input to be entered.

Actual Behavior
When in window mode with borderless is set to false, form element behave as they would on a regular web page. However, setting borderless to true results in form elements that seem to be disabled or unresponsive to user input.

Specifications

NeutralinoJs Version: 2.4.0
NeutralinoJs CLI version: 1.0.0
Platform: macOS Big Sur

tinomatic commented 3 years ago

My code for the above issue is standard stuff I think!

index.html

<!doctype html>
<html class="no-js" lang="">

<head>
    <meta charset="utf-8">
    <title>Register</title>

    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/app.css">

    <meta name="theme-color" content="#fafafa">
</head>

<body>
<div class="view-container">
    <div class="view-content-container">
        <div class="view-form-section">
            <form class="form-container">
                <label class="form-label" for="email">Your email address</label>
                <input class="form-input" type="email" name="email" id="email"/>
                <label class="form-label" for="code">Registration code</label>
                <input class="form-input" type="text" name="code" id="code"/>
                <input type="submit" value="Register" onclick="" />
            </form>
        </div>
    </div>
</div>

<script src="js/neutralino.js"></script>
<script src="js/main.js"></script>
</body>

</html>

neutralino.config.json

{
  "applicationId": "com.example.app",
  "port": 0,
  "defaultMode": "window",
  "enableHTTPServer": true,
  "enableNativeAPI": true,
  "url": "/resources/",
  "nativeBlockList": [],
  "globalVariables": {},
  "modes": {
    "window": {
      "title": "AboutYou",
      "width": 600,
      "height": 550,
      "minWidth": 600,
      "minHeight": 550,
      "fullScreen": false,
      "alwaysOnTop": true,
      "icon": "/resources/icons/appIcon.png",
      "enableInspector": true,
      "borderless": true,
      "resizable": false,
      "maximize": false,
      "hidden": false
    },
    "browser": {},
    "cloud": {}
  },
  "cli": {
    "binaryName": "AboutYou",
    "resourcesPath": "/resources/",
    "clientLibrary": "/resources/js/neutralino.js",
    "binaryVersion": "2.4.0",
    "clientVersion": "1.0.0"
  }
}

main.js

window.myApp = {
    register_client: () => {},
    hide_window: () => {}
};

Neutralino.init();

kamal0808 commented 2 years ago

Hi @tinomatic , were you able to solve this for yourself?

yulolimum commented 2 years ago

Same issue. borderless: false: inputs receive focus borderless: true: inputs no longer receive focus and links no longer receive the pointer cursor

https://user-images.githubusercontent.com/1775841/170849595-391010a2-f70f-4d25-bbda-03ae7b1c875e.mp4

pegvin commented 2 years ago

This issue Seems like more of a CSS Issue, because your code works on my system. Can you share a repository with the code? mainly the CSS and HTML. (btw UI looks beautiful)

yulolimum commented 2 years ago

@pegvin thank you!

Here's a very basic reproduction using the new create command: https://github.com/yulolimum/borderless-issue-repro

You can run it with npx @neutralinojs/neu run

If this helps, I'm on a Mac. I can test it on Linux tomorrow. I dont know much about Windows environment setup so probably won't be able to test that for now.

Edit 1:

An additional observation - not sure it matters but... I am running on an M1 Mac. So, since there's no arm arch neutralino binary, the app runs using Rosetta: yulolimum-capture-2022-05-29--03-02-36@2x

Edit 2:

Framework versions: yulolimum-capture-2022-05-29--03-12-25@2x

pegvin commented 2 years ago

Hi there! I tried the code you shared and it works fine on Linux, i am pretty sure it's not the Rendering Engine. Can you try stuff like z-index?

yulolimum commented 2 years ago

I agree, I dont think it's the rendering engine. However, I also don't think it has anything to do with z-index values since those are relative to other HTML elements. Nothing changes inside the HTML when borderless: true, unless Neutralino js client script does something behind the scenes. I suspect it's something to do with the way the borderless mask is applied on OSX or it has something to do with Rosetta. I'll try to replicate this on an Intel mac as well.

monsterkodi commented 7 months ago

I think this issue should be solved with the merge of https://github.com/neutralinojs/neutralinojs/pull/1198 (borderless windows on mac didn't get focus before)

shalithasuranga commented 2 months ago

Closing this issue since the bug was fixed with #1198 :tada:

neutralinojs / neutralinojs

Form elements don't respond when borderless WebView set #521