apalfrey / select2-bootstrap-5-theme

A Select2 v4 theme for Bootstrap 5
https://apalfrey.github.io/select2-bootstrap-5-theme/
MIT License
212 stars 48 forks source link

Can't reproduce example to auto place cursor in search field. Are dumb questions welcome here? #45

Closed chrisjdixon closed 3 years ago

chrisjdixon commented 3 years ago

I'm having trouble getting the typing cursor to automatically place within the text field once they're clicked on as shown in the example page. I'm unsure if this the same issue as "Search field not focused".

I've tried to isolate the problem by using the source code of that page with no luck. After removing other content and adding <script>$("#eg-select").select2({theme: "bootstrap-5",});</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" />
    <!-- Select2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" />

    <!-- select2-bootstrap-5-theme -->
    <link href="/select2-bootstrap-5-theme/select2-bootstrap-5-theme.css" rel="stylesheet"> <!-- for local development env -->
</head>

<body class="bg-light pb-5">
    <div class="container pb-3 mb-5">
        <h3>Single Select</h3>
        <form class="mb-4">
            <select class="form-select" data-placeholder="Choose one thing" data-allow-clear="1" id="eg-select">
                <option></option>
                <option>Reactive</option>
                <option disabled>Solution (disabled)</option>
                <option>Conglomeration</option>
                <option>Algoritm</option>
                <option>Holistic</option>
        <script>$("#eg-select").select2({
            theme: "bootstrap-5",
        });
        </script>
            </select>
        </form>
    </div>

    <!-- jQuery -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- select2-bootstrap-5-theme -->
    <script src="/select2-bootstrap-5-theme/script.js"></script>
</body>
</html>

What am I doing wrong? Am I missing something?

Also, I'm new to front end so I'm probably doing something stupid. I'd ask somewhere else but don't know where else to try for bootstrap / select2, so please feel free to tell me of a more appropriate place I can ask stupid questions.

chrisjdixon commented 3 years ago

Figured it out: see this comment explaining how to fix this with jQuery 3.6.0.