为什么在输入自动完成建议点击时关闭 Chrome 扩展程序弹出窗口？答案

【问题标题】：Why id Chrome extension popup closing on input autocomplete suggestion click?为什么在输入自动完成建议点击时关闭 Chrome 扩展程序弹出窗口？
【发布时间】：2016-05-13 10:23:23
【问题描述】：

对于 Chrome 扩展，我使用弹出窗口作为 Angular 的登录表单。

但在 OS X 上，当我单击用户名自动完成建议时，弹出窗口会自行关闭，就像您在弹出窗口外部单击时一样。但它在 Windows 上运行良好。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <!-- build:css styles/vendor.css -->
  <!-- bower:css -->

  <link href="bower_components/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css styles/main.css -->
  <link href="styles/main.css" rel="stylesheet">
  <!-- endbuild -->
</head>

<body ng-app="myApp" ng-controller="MainCtrl">

  <div ng-if="loggedIn">
    <p>
      <img src="images/logo-full.png">
    </p>
    <p class=""><strong>You're logged in as:</strong>
    </p>
    <p><i>{{user}}</i>
    </p>
    <br>
    <div class="center-block">
      <button class="btn btn-danger" ng-click="logout()">Log out</button>
      <a class="btn btn-primary pull-right" ng-href="https://example.com/cockpit" target="_blank">Go to Cockpit</a>

    </div>
  </div>

  <div ng-if="!loggedIn">
    <p>
      <img src="images/logo-full.png">
    </p>
    <form ng-submit="login(username, password)">
      <div class="form-group">
        <label for="username" class="sr-only">Email</label>
        <input id="username" class="form-control" type="text" ng-model="username" required placeholder="Email">
      </div>
      <div class="form-group">
        <label for="password" class="sr-only">Password</label>
        <input id="password" class="form-control" type="password" ng-model="password" required placeholder="Password">
      </div>
      <div class="alert alert-danger" role="alert" ng-if="error">{{error}}</div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary" ng-disabled="loading">Log in</button>
      </div>
      <div class="form-group">
        <a href="https://example.com/auth/reset" target="_blank"><small>Forgot your password?</small></a>
      </div>
    </form>
    <div class="margin-top-big">
      <a href="https://example.com/auth/signup" target="_blank" class="btn btn-block btn-success"><strong>Don't have an account? Get started</strong></a>
    </div>
  </div>

  <!-- build:js scripts/vendor.js -->
  <!-- bower:js -->
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/jquery-cookie/jquery.cookie.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
  <!-- endbower -->
  <!-- endbuild -->
  <script src="lib/myLib.js"></script>

  <!-- build:js scripts/popup.js -->
  <script src="scripts/popup.js"></script>
  <!-- endbuild -->
</body>

</html>

有解决方法的想法吗？

【问题讨论】：

嘿，你找到解决这个问题的方法了吗？
@JsIsAwesome 仍然没有。如果是这样，我会告诉你的

标签： angularjs forms google-chrome-extension safari

【解决方案1】：

似乎 OSX 将文本弹出窗口上的点击视为扩展弹出区域之外的点击，这会导致它关闭。

我在 Safari 和 Chrome 的扩展程序上观察到了它，但仅在 OSX 上。这是 Chromium bugtracker 中的 related ticket。

在某些情况下，您可以制作一个自定义控件，该控件将使用 div 来显示弹出内容，从而防止出现此问题。对于自动填充，我认为不存在解决方法。您可以尝试在 OSX 浏览器中完全禁用自动填充。几乎没有更好的解决方案，但可能更适合您。

【讨论】：

:-( 去年有没有找到解决方法，也遇到了同样的问题。