I'm experiencing issues with the autofocus attribute when using the bmd-label-floating feature in Bootstrap Material Design version 4.1.1

Issue with Bootstrap-JavaScript Autofocus Attribute

Upon page load, the autofocus attribute fails to trigger the addition of the is-focused class by the Bootstrap-JavaScript for the corresponding (bmd-)form-group.

https://i.sstatic.net/2V374.png

<fieldset class="form-group bmd-form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Label Behavior on Typing

When typing in the field, the label moves up due to the addition of the is-filled class. However, the focus is still not recognized.

https://i.sstatic.net/FwHZY.png

<fieldset class="form-group bmd-form-group is-filled">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Desired Output Issue

The only way to achieve the desired appearance with the is-focused class is by deselecting and then reselecting the text input (through mouseclicks or the tab key).

https://i.sstatic.net/oUKTi.png

<fieldset class="form-group bmd-form-group is-filled is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Seeking Solutions

Is there any workaround or fix available to address this issue?

Bootstrap Material Design version being used: Version 4.1.1

Input HTML Code:

<fieldset class="form-group">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>
javascriptfocusmaterial-designbootstrap-4autofocus

Answer №1

After some experimentation, I found that manually adding the is-focused class directly to the corresponding (bmd-)form-group of the item that is autofocused does the trick.

<fieldset class="form-group is-focused">
    <label for="usernameControl" class="bmd-label-floating">Username</label>
    <input type="text" class="form-control text-light" required="" id="usernameControl" name="username" autofocus="">
</fieldset>

Answer №2

<script> $('body').bootstrapMaterialDesign({}); </script>

Include the code snippet above on your webpage to enhance its design using . This will improve the appearance of forms and other elements.

Answer №3

When utilizing the code snippet shown below (bmd-)form-group, everything works smoothly.

<input type="text" class="form-control text-light" id="usernameControl" name="username">

However, if you are incorporating properties such as autofocus, required, readonly, and others:

autofocus, required, readonly and similar attributes, it will not function as expected. In order to make this scenario work properly, a new custom class needs to be added.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most efficient way to transform HTML into React components effortlessly?

I have been attempting to automate the process of converting HTML into React components. I followed the link below to automatically convert HTML into React components: https://www.npmjs.com/package/html-to-react-components However, I encountered an issue ...

javascripthtmlreactjsnpm

Unable to load JavaScript file twice dynamically in Internet Explorer

I recently created this page where users can click on rows in a table to load data via an ajax request and dynamically generate a graph. While this functionality works smoothly in Chrome and Firefox, I'm experiencing issues with Internet Explorer 8. S ...

javascriptjqueryinternet-explorer-8cross-browser

Creating a text field in an input box using JavaScript or jQuery to input data

At work, I need to use a web application that requires me to fill in two input fields. However, when I try to do so using JavaScript commands, the strings appear but the "Add" button remains disabled. Additionally, even if I enable the button, the data can ...

javascriptjquerytextboxtextfield

How come the 'npm install canvas' command did not generate a JavaScript file as expected?

My venture into the world of node packages has just begun. I recently tried installing canvas to my project using this command: npm install canvas Prior to successfully executing the installation, it was necessary for me to first install gtk and cairo by ...

javascriptnode.jscanvaswebpack

Understanding JavaScript Regular Expressions

To ensure that no HTML tags are entered into a textarea, I am utilizing the following regex for validation. If any HTML tags are detected in the textarea, I need to display a validation message. The regex being used is: /<(\w+)((?:\s+\w ...

javascripthtml

Utilizing Dynamic Image Sources in Vue.js with the Help of APIs

Can someone help me figure out how to solve this issue? I have an API that returns a base64 image, and I want to load this image on my site. Any suggestions on where or how I should implement my function? This is the API call located in the methods: metho ...

javascriptvue.jsvuetify.js

Is it possible to enable tab navigation for a button located within a div when the div is in focus?

I have a component set up like this: (Check out the Code Sandbox example here: https://codesandbox.io/s/boring-platform-1ry6b2?file=/src/App.js) https://i.sstatic.net/ZuxdL.png The section highlighted in green is a div. Here is the code snippet: import { ...

javascriptcssreactjs

What is the best method for presenting nested JSON data in React using a key-value pair format?

This component serves as the product description section with tabs for both description and details. Selecting the description tab displays the product specifications in a tabular format. We are utilizing the Axios library to fetch JSON data from an API. I ...

javascriptjsonreactjs

Make sure to execute the fire directive only when ng-repeat has completed

Currently, I am utilizing owl carousel with data being fetched through an Ajax call. Once the data populates the HTML content using ng-repeat, I need to trigger the directive that initializes the owl carousel. How can I achieve this? One approach I consid ...

javascriptangularjsajax

Does the Node Schedule library create new processes by spawning or forking them?

Is the node-schedule npm module responsible for spawning/forking a new process, or do we need to handle it ourselves? var cron = require('node-schedule'); var cronExpress="0 * * * *"; cron.scheduleJob(cronExpress, () => { //logger.info(" ...

javascriptnode.jsnpm

Using Vue.js to easily move objects between two selection elements

Below is the HTML code that includes 2 select elements and 2 buttons for transferring options between them: <div class="col-xs-1" style="width:45%"> <label for="txtDescricao">Motivos</label> <select multiple="multiple" class=" ...

javascriptvue.js

` `$(document.documentElement) selecting a particular element` `

Here is a function that I am working with: jQuery(document.documentElement).on('click touch', function(e) { // check if $(e.target) matches with $('ul#menu-navigation > li.menu-item') // or any child elements within this spe ...

javascriptjquery

Retrieve the value of a specific key from the previous state object using the useState hook

I've searched exhaustively on stack overflow, but couldn't find a similar solution. I need to update an object key-value pair without using the old value. Let's consider a graph declared using useState: const [graphBounds, setGraphBounds] ...

javascriptreactjsreact-hooks

What could be causing the sporadic functionality of my jQuery image resizing code?

Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why. ...

javascriptjquerycssjcarousellite

Explore the world of HTML event listening through .NET integration

Imagine this scenario: within an HTML page, using an UpdatePanel, you have a loading animated gif spinning while ASP.NET processes data from a webservice. I'm curious if there's a way to create an Event in .NET code that can be detected on the H ...

asp.netjavascriptajaxevents

The jQuery `.load` function appears to be malfunctioning

I am having trouble getting my simple .load() function from jQuery to work. When I click on my DIV, nothing happens. However, the alert TEST does work. <div class="ing">CLICK HERE</div> <div id="overlay3-content"></div> <scrip ...

javascriptjqueryhtml

The getElementByID function functions properly in Firefox but does encounter issues in Internet Explorer and Chrome

function switchVideo() { let selectedIndex = document.myvid1.vid_select.selectedIndex; let videoSelect = document.myvid1.vid_select.options[selectedIndex].value; document.getElementById("video").src = videoSelect; } <form name="myvid1"> <s ...

javascripthtml

Watch the video and follow along with your mouse using jQuery

Wouldn't it be cool to have a video play and follow your mouse pointer when you hover over the red box? And then once you move away, the video stops and disappears. Check out my progress so far: jsfiddle Here's the jQuery code I've used: $ ...

javascriptjqueryhtmlcss

Updating a component when a prop changes

Embarking on my journey into the world of React, I find myself in need of assistance. The issue at hand involves re-rendering data within my Table component. Whenever a new API call is made to create an entry in my database using Prisma, the newly added d ...

javascriptreactjsnext.jsreact-props

Ways to establish a default search outcome in a search box

Looking to create a search bar with JavaScript and JSON to display default search results for visitors. Currently, the search bar only shows results after text is removed. How can I show predefined search results when the page is loaded? const search = ...

javascripthtmljson