0

I have a Twitter Typeahead inside of a Semantic UI modal. The desired behavior is that the user can select something from the typeahead and still work within the modal before confirming their selection. However, if the user clicks on a selection, then the modal closes early. This only occurs when clicking; if the user uses the arrow keys to select an option, or uses Tab to complete, then the modal stays open as desired.

I've made a JSFiddle to demonstrate the problem. Minimal code summary below:

index.html:

<div id="pick-user-modal" class="ui modal"><i class="close icon"></i>
    <div class="header">Select user</div>
    <div class="content">
      <input type="text" id="user-field" />
    </div>
    <div class="actions">
      <a id="send-request" class="ui green button">Select user</a>
    </div>
</div>
<a class="green ui button" id="show-pick-user-modal">Select user</a>

main.js:

$('#pick-user-modal').modal();
$('#show-pick-user-modal').click(function () {
    $('#pick-user-modal').modal('show');
});
var $users = $('#user-field');
$users.typeahead({
    name: 'users',
    local: ["Andy","Betty","Charles","Dotty","Elton","Fred","Grace","Harriet",
            "Ichabod","Jenny","Karen","Louise","Michael","Nathan","Oswald",
            "Patricia","Quendy","Robert","Sylvia","Thomas","Ursula","Vivian",
            "Wendy","Xavier","Yvonne","Zachary"]
});
function setUser(e,d){
    alert(d.value);
}
$users.on('typeahead:selected',setUser);
$users.on('typeahead:autocompleted',setUser);

I've tried returning false from setUser and also calling e.preventDefault(), but neither has solved the problem.

4

1 に答える 1

0

私はまったく同じ問題を見てきました。それが閉じないようにする唯一のことは、closeable を false に設定することです。これは、私が他の方法で使用する設定ではありません。

モーダルのデバッグ モードを有効にすると、次のメッセージが表示されます。

1

jquery がその要素を認識していないと思われます。

于 2014-04-29T13:26:20.773 に答える