kivymd text field stills shows the hint_text in the field after typing

I am having trouble with MDTextField. It carries on displaying the hint inside the textfield while typing. I have tried setting the background color to hide it but that didn't work. I have looked at a few tutorials and everyone seems to be doing it the same way as me and it just works for other people so I feel I have done something really wrong.

Any help will be greatly appreciated. Thanks in advance.

main.py

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Windowfrom kivy.config import Config
from kivy.uix.screenmanager import ScreenManager, Screen
from kivymd.theming import ThemeManager
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.graphics import Rectangle, Color
import pymysql


class WelcomeScreen(Screen):
    pass


class LoginScreen(Screen):
    pass


class RegisterScreen(Screen):
    pass


class WindowManager(ScreenManager):
    pass


class MainApp(MDApp):

    def build(self):
        # theme_cls = ThemeManager()
        return Builder.load_file("main.kv")

    def change_screen(self, screen, direction):
        self.root.transition.direction = direction
        self.root.current = screen


if __name__ == "__main__":
    MainApp().run()

main.kv

#: import Window kivy.core.window.Window
#: import MDLabel kivymd.uix.label.MDLabel
#: import Rectangle kivy.graphics.Rectangle
#: import Color kivy.graphics.Rectangle


WindowManager:
    WelcomeScreen:
    LoginScreen:
    RegisterScreen:



<WelcomeScreen>:
    name: "welcome_screen"




    FloatLayout:
        orientation: "vertical"

        MDToolbar:
            id: toolbar
            title: "SecureIT 24/7"
            pos_hint: {'top': 1}



        Button:

            text: 'Login'
            color: 1, 1, 1, 1
            size_hint: 0.25, 0.25
            pos_hint: {"right":0.625, "top":0.80}
            on_release:
                app.root.current = "login_screen"

        Button:

            text: 'Register'
            color: 1,1,1,1
            size_hint: 0.25, 0.25
            pos_hint: {"right":0.625, "top":0.55 }
            on_release:
                app.root.current = "register_screen"


<LoginScreen>:
    name: "login_screen"
    FloatLayout:
        MDBanner:
            id: banner
            text: "Login"
            # The widget that is under the banner.
            # It will be shifted down to the height of the banner.

        MDToolbar:
            id: toolbar
            title: "Login"
            elevation: 10
            pos_hint: {'top': 1}
            left_action_items: [['arrow-left', lambda screen: app.change_screen('welcome_screen', 'right')]]

    FloatLayout:
        padding: [50,50,50,50]
        spacing: 50

        FloatLayout:

            orientation: 'vertical'

            Label:
                text: 'Login'
                font_size: 18
                halign: 'center'
                text_size: root.width-20, 20
                color: 0,0,0,1
                pos_hint: {"right":1, "top":1.25}

            TextInput:
                id: login
                multiline:False
                font_size: 28
                size_hint: 0.50, 0.10
                pos_hint: {"right":0.75, "top":0.70}

        FloatLayout:

            orientation: 'vertical'

            Label:
                text: 'Password'
                halign: 'center'
                font_size: 18
                text_size: root.width-20, 20
                color: 0,0,0,1

            TextInput:
                id: password
                multiline:False
                password:True
                font_size: 28
                size_hint: 0.50, 0.10
                pos_hint: {"right":0.75, "top":0.45}

            Button:
                text: 'Login'
                size_hint: 0.25, 0.25
                font_size: 24
                pos_hint: {"right":0.625, "top":0.30}

<WhiteLabel@MDLabel>
    height: self.texture_size[1]
    theme_text_color: "Custom"
    text_color: 1, 1, 1, 1

<CustomInput@MDTextField>
    multiline:False
#    required: True
    mode: "line"
    pos_hint: {"right": 0.456}
    current_hint_text_color: [0,0,0,0.5]



<RegisterScreen>:
    name: "register_screen"
    FloatLayout:
        MDBanner:
            id: banner
            text: "ioshrdioaoisdhf"

        MDToolbar:
            id: toolbar
            title: "Register"
            elevation: 10
            pos_hint: {'top': 1}
            left_action_items: [['arrow-left', lambda screen: app.change_screen('welcome_screen', 'right')]]

            BoxLayout:
                orientation: "vertical"
                height: self.minimum_height * 2
                size_hint_y: None
                pos_hint: {"top": 2}

                CustomInput:
                    id: firstname
                    hint_text: "color_mode = 'custom'"


                CustomInput:
                    id: surname
                    hint_text: 'Surname'

                CustomInput:
                    id: email
                    hint_text: 'Email'

By naming your kv file as main.kv, you are taking advantage of the automatic loading of correctly named kv files as described in the documentation. However, you are also loading the same file using Builder.load_file("main.kv"). Loading the same kv file more than once can cause the sort of problems you are seeing. You can fix your problem by simply eliminating the call to Builder.load_file("main.kv"), or removing the entire build() method, or by changing the name of either the kv file or the MainApp class.