I set an image to my img in Blazor:

<InputFile @ref="inputFile" OnChange="@ShowPreview" />


<div class="fillContainer"> 
    <img id="capturedImage" onchange="@Checker()" style="max-width:200px;max-height:200px" @ref="previewImageElem" />
</div>

 public static string ImageResult; 

    private InputFile? inputFile;
    private ElementReference previewImageElem;

    private async Task ShowPreview() => await JS.InvokeVoidAsync(
        "previewImage", inputFile!.Element, previewImageElem);

This is all working fine. The image is displayed.

But when I now want to use the image, I am trying this:

private async Task Checker()
{
    var result = await JS.InvokeAsync<string>("captureImage");

    if (result == null) return;
    if (result.Length < 20)
    {
        return;
    }
    else
    {
        string output = result.Substring(result.IndexOf(',') + 1);
        ImageResult = output;
    }

}

but this most of the time fails here at the result part.

This function is behind this:

function captureImage() {
    var canvas = document.createElement('canvas');
    var img = document.getElementById('capturedImage');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);
    return canvas.toDataURL('image/png');
}

This sometimes returns nothing, but most of the times disconnects the server connection and then re connects again.
Every following js call then crashes and is never executed.

But on rare occasions it just works fine.

What am I missing here?

I have a 2d array of “tiles” where each one can connect to the tiles around it (top, bottom, right, left). Some of these tiles are “water” and form rivers (river tiles can still be connected to other tiles) and the land tiles form clusters. For example:

// 1=land, 0=river
let array = [[1, 1, 0, 1], 
             [1, 1, 0, 1], 
             [1, 0, 0, 1],
             [1, 0, 1, 1]]

each tile, represented as a number above, stores its information in the form:

{connections: ["top", "bottom", "left" ...], type: "land/water, ... some more non relevant info}

My problem is counting how many connections there are between the land clusters, or if you think of the connections as roads, how many river crossings there are.

I thought of implementing the solution like so:

• find all land clusters and store their locations (like this?)
• loop through all tiles until a water tile connected to a land tile is reached.
• loop through all this tiles water connections, keeping track of where we have been
• once we reach another water tile connected to a land tile from a different land mass (can be starting tile), update river crossings counter and continue.
• once there are no more connected tiles, find another water tile connected to a land tile and repeat

But i’m a pretty beginner programmer so I’m not sure how to code this.

My question is then: will this work correctly for any combination of land masses, rivers and tile connections, is there a more efficient/correct way of solving this, and what would an implementation look like?

`

Before and after pseudo selector

body {
background-color: black;
color: white;
margin: 0;
}

    ul {
        display: flex;
        flex-direction: row;
        padding: 13px 23px;
    }

   

    header::before {
        content: "";
        background: url('https://images.unsplash.com/photo-1535732759880-bbd5c7265e3f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80') no-repeat center;
        background-size: cover;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1; /* Ensure the background is behind the content */
        opacity: 0.8;
    }

    section {
        display: flex;
        flex-direction: column;
        padding: 98px 47px;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 1.5rem;
        margin: 0px 349px;
    }

    p {
        align-self: center;
    }

    li {
        padding: 0px 43px;
        list-style: none;
        font-family: 'Raleway', sans-serif;
    }

    h1 {
        font-family: 'Kanit', sans-serif;
    }
</style>

• Home
• About Us
• Contact Us
• Offers

Welcome to Masood’s blog

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, saepe provident aspernatur officia nesciunt veniam amet perspiciatis eum eligendi, minus molestias sed cupiditate sapiente alias ipsum. Doloremque placeat inventore omnis maiores enim provident? Soluta iste totam dolorem expedita incidunt doloremque.

`

my code pen link(https://codepen.io/pen/?editors=1000)

i want the image with position relative in header pseudo selector

i am building a blazor web application. I have a simple bit of js that i need for one of my pages:

const otherRadio = document.getElementById("other");
const otherSelect = document.getElementById("selectothergender");

otherRadio.addEventListener("change", function () {
    alert("asd")
    if (this.checked) {
        otherSelect.disabled = false;
    } else {
        otherSelect.disabled = true;
    }
});

this bit of code just sits comfortbly inside my _host.cshtml file.
But that means it is rendered upon page load.
But the otherRadio doesnt exist unless on the correct page.

So _host.cshtml cannot be the right place to put this.
Also I cannot put js on the page it belongs to as the page isnt static.
Where can I put this?

I’ve been dealing with the relentless flood of video and channel recommendations on the YouTube homepage for what feels like an eternity. Even when I mark the same channels and videos as “Don’t recommend channel,” they somehow manage to resurface in my recommendations after a while. It’s a persistent issue that YouTube seems to be turning a blind eye to, despite numerous notifications.

The never-ending task of manually clicking “Don’t recommend channel” for these seemingly absurd suggestions has become incredibly tiresome and frustrating. My attempt to automate this using the browser’s Console seemed promising, but something is amiss.

When you hover over a video thumbnail on the YouTube homepage, a context menu conveniently appears, offering options like “Don’t recommend channel.” The code I’m currently using attempts to click on the three dots (ellipsis) menu for any video on the page and then selects the “Don’t recommend channel” option. However, it often executes this action only once or not at all.

Subsequently, I find myself having to manually click on the three dots menu. Strangely, when I do so manually, the code responsible for checking menuItem.textContent suddenly activates and automatically clicks the “Don’t recommend channel” option within the menu.

My ultimate goal is to automate the process of clicking on the context menu that appears when hovering over the thumbnail of each video on the homepage and then selecting the “Don’t recommend channel” option from the available choices.

I would greatly appreciate any insights into what might be wrong with the existing code and any updates or solutions that could be provided. Your assistance is highly valued in advance.

// Function to click the "Don't recommend this channel" option in the YouTube context menu
function clickDontRecommend() {
  const menuContainers = document.querySelectorAll('ytd-popup-container');
          
  menuContainers.forEach((menuContainer) => {
    if (menuContainer) {
      const menuItems = menuContainer.querySelectorAll('yt-formatted-string');
            
      menuItems.forEach((menuItem) => {
        if (menuItem.textContent === "Don't recommend channel") {
          menuItem.click();
          return; // Exit the loop after clicking the item
        }
      });
    }
  });
}

// Function to go to the next video
function goToNextVideo() {
  const nextButton = document.querySelector('.ytp-next-button');

  if (nextButton) {
    nextButton.click();
  }
}

// Function to apply "Don't recommend this channel" to multiple videos
function applyToAllVideos(numVideos) {
  let videosProcessed = 1;

  function processVideo() {
    setTimeout(() => {
      clickDontRecommend();
      goToNextVideo();
      videosProcessed++;

      if (videosProcessed < numVideos) {
        processVideo();
      }
    }, 1000); // Adjust the delay as needed
  }

  // Start processing videos
  processVideo();
}

// Usage example: Apply to 5 videos
applyToAllVideos(5);

Information: Youtube history feature and all other features have been disabled since the account was established. It is my personal preference to find the content I want through search.

I am sending my documents through expressjs to my server and then update the document by using the request body which comes as JSON (partial document) and passing it to the findByIdAndUpdate() function.

I’ve learned by using undefined as a field value of the document the field gets removed. So far, so good, but I am sending my body through expressjs, which does not allow me undefined as a value. I can only use null, but null will result in not removing the field but rather setting it to null.

What can I do in that case?

My Schema:

const personSchema = new Schema<IPerson>(
  {
    name: String,
    age: Number
  }
);

My initial document:

{
  name: 'Maxwell',
  age: 30
}

My document used in findByIdAndUpdate():

{
  name: 'Jane Doe',
  age: null
}

The final document:

{
  name: 'Jane Doe',
  age: null
}

The document I’ve expected:

{
  name: 'Jane Doe'
}

I have written an alertbox function using bootstrap modal in a separate .php file includes the html and jquery also.

I am calling that alertbox function (i have included the modal written .php file in my calling .php file) from different .php files via jquery script which is written into the calling .php files.

alertbox function is showing and hiding properly. But after hiding the alertbox function unable to process very next line in my calling script

<!-- Modal -->
    <div class="modal fade" data-backdrop="static" data-keyboard="false" id="alertmodal" data-bs-backdrop="static" 
            data-bs-keyboard="false" tabindex="-1" aria-hidden='true'>
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header" id='alert-header-div' style='background-color: green;'>
                    <h5 class="modal-title" id="alert-header" style='color: white; font-size: 30px;'></h5>
                    <span style='font-size: 30px; color: white' class='w3-btn w3-right fa fa-close' 
                                id='alert-closebutton' onclick='alert_close()'></span>
                </div>
                <div class="modal-body" style='background-color: white;'>
                    <p id='alert-body' style='color: blue;'></p>
                </div>
                <div class="modal-footer" id='alert-footer'>
                    <button type="button" class="btn btn-primary"   id='alert-button1' onclick='alert_confirmation(0)'>Save Changes</button>
                    <button type="button" class="btn btn-secondary" id='alert-button2' onclick='alert_confirmation(1)'>Close</button>
                </div>
            </div>
        

</div>
    </div>

    <script>

        function alertbox(alert_text,alert_header='INFORMATION',alert_button1='Yes',alert_button2='No')
        {
            //          
            $('#alert-header').text('');            
            $('#alert-body').text('');
            $('#alert-button1').hide();
            $('#alert-button2').hide();                                 
            //  
            var xalert_text     = alert_text;
            var xalert_header   = alert_header.toUpperCase();
            var xalert_color    = '';
            var waitingtime     = 5000;
            //      
            if(xalert_header =='ERROR' || xalert_header =='E')
            {
                xalert_header   = 'ERROR';
                xalert_color    ='red';
                waitingtime     = 0;
            }
            else if(xalert_header =='SUCCESS' || xalert_header =='S')
            {
                xalert_header='SUCCESS';
                xalert_color='green';
            }
            else if(xalert_header =='INFORMATION' || xalert_header =='I')
            {
                xalert_header = 'INFORMATION';
                xalert_color='teal';
            }   
            else if(xalert_header =='MESSAGE' || xalert_header =='M')
            {
                xalert_header = 'MESSAGE';
                xalert_color='blue';
            }   
            else if(xalert_header =='WARNING' || xalert_header =='W')
            {
                xalert_header = 'WARNING';
                xalert_color='purple';
            }
            else if(xalert_header =='CONFIRMATION' || xalert_header =='C')
            {
                xalert_header = 'CONFIRMATION';
                xalert_color='green';
                $('#alert-button1').show();
                $('#alert-button2').show();
                $('#alert-button1').html(alert_button1);
                $('#alert-button2').html(alert_button2);
            }
            $('#alert-body').html(xalert_text);                 
            $('#alert-header').text(xalert_header);
            $('#alert-header-div').css('background-color',xalert_color);
            $('#alert-closebutton').css('background-color',xalert_color);
            $('#alertmodal').modal('show');
            //
            if (waitingtime>0)
            {
                AutoCloseDialogBox(waitingtime);
            }
        }       
 
        function AutoCloseDialogBox1(WaitSeconds) 
        {
            setTimeout(function ()
            {
                $('#alertmodal').modal('hide');
                }, WaitSeconds);
        }

        function alert_close()
        {
            $('#alertmodal').modal('hide');
        }

        function alert_confirmation(pass_no)
        {
            $('#alertmodal').modal('hide');
            //
            if(pass_no==0)
                return true;
            
            if(pass_no==1)
                return false;
        }



I AM CALLING FROM THE SCRIPT BELOW
==================================
1. alertbox('accessing show detail part'); << IT IS EXECUTING THE MODAL AND HIDE THE MODAL PROPER
2. fillup_headerpart_data(pass_id,'',pass_part,pass_row_position); << THIS LINE IS NOT EXECUTING AFTER HIDING THE MODAL

==

I’m trying to build a web view app for a site and I have added the places API with key and tested. It works fine.

But when I built the app in web view the places API didn’t work.

Here’s my Code :

Activity:

Manifest:

Any help is greatly appreciated.

How Can I Solve this ?

Technical Test:
Musaei is a new species that has been recently discovered. What is interesting about this specie is that
their reproduction follows a peculiar formula M(t), where M(t) is the number of Musaei’s at a specific
time t:
At time 0 the population of Musaei’s was 1:
M(0) = 1
At time 1 the population of Musaei’s was still 1:
M(1) = 1
So we introduced an additional Musaei to start the reproduction cycle at time 2, so:
M(2) = 2
From that time forward, the Musaei’s population can be accurately forecasted per the following two
formulas:
M(2t) = M(t) + M(t + 1) + t (for t > 1)
M(2t + 1) = M(t – 1) + M(t) + 1 (for t >= 1)
Write a function Musaei(q) in JavaScript that given a positive integer q, not greater than 10^19, it
returns the last time t that the Musaei’s populace will be equal to that number q.
If there no such amount q, then return “Never”.
PS: Record the Musaei(t) function execution time: difference of time at the beginning of the function
and end of the function; the script should not timeout for any of the use cases.
Examples input and output:
 Input q: 4
 Output t: 5
 Execution time: 0.19 milliseconds
 Input q: 15
 Output t: 8
 Execution time: 0.21 milliseconds
 Input q: 22
 Output t: 17
 Execution time: 0.25 milliseconds
 Input q: 100
 Output t: Never
 Execution time: 0.52 milliseconds
 Input q: 8123
 Output t: 2453
 Execution time: 1.21 milliseconds
 Input q: 1000006
 Output t: 186468
 Execution time: 1.62 milliseconds
 Input q: 79537088
 Output t: 12499999
 Execution time: 5.23 milliseconds
 Input q: 999999993
 Output t: 130377746
 Execution time: 5.885 milliseconds
 Input q: 10000000000000000000
 Output t: Never
 Execution time: 32.27 milliseconds

i tried all things but i didn’t solve this

Unable to import multiple web components to a single react component by using this method
customElements.define(); Unable to import with custom names to, if I tried adding default export option to web component in npm package its not working in other frame work except react.

I tried Importing by same method customElements.define() from multiple components from npm package , but failed.

Im having the follow issue, on localhost it works fine, and, on AWS EC2 server too, but when i deply the application on Vercel, the path that should show my Swagger UI (like: localhost:8080/swagger), it only shows a blank page. As i said, when i deploy anywherelse it works fine, with the exactly same repositoy, but on vercel, it show a blank page.

Someone have any ideia about what can be happening? I’ve seached about it but without success.

Ps: I realized that some people have a issue that the swagger ui load but doesnt load the css files, but that is not my case. In my case i have a literally blank screen.

Thank you very much.

Im using Nestjs as main framwork
My nestjs/swagger version: 7.0.3
My node version: 18.17.0

I tried update the swagger version and didnt worked. I tried to host my application in other place (like aws ec2) with the same repo and worked, but on vercel, is not.

I have to design a webshop for university and I am having troubles and I cannot find the problem. On certain pages when I look at the tablet or mobile version there is so much space after the html tag even, I cannot find the mistake. Also this only happens on half of the pages, not on every page.

One of the pages that have that error:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>guapo. | Hilfe</title>

  <link rel="icon" href="images/clementine.png" sizes="16x16 32x32" type="image/png" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
  <link rel="stylesheet" href="css/stylesheet.css" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
    crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>

<body>
  <div id="navbar"></div>


  <div class="container content">
    <p>
      Durch Klick auf gewünschten Tab gelangst du zur gewünschten Seite.
      <br />
      Bei Fragen und Anregungen wende dich bitte an uns: <a href="mailto:[email protected]">
        [email protected]
      </a>
    </p>

    <h2>FAQs</h2>

    <div class="accordion" id="accordionExample">

      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
            style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
            Wie lange dauert die Lieferung meiner Bestellung?
          </button>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne"
          data-bs-parent="#accordionExample">
          <div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
            Wir versenden aus Österreich nach ganz Europa. In der Regel dauert dies 3-5 Werktage.
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header" id="headingTwo">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
            style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
            Kann ich meine Bestellung zurücksenden oder umtauschen?
          </button>
        </h2>
        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
          data-bs-parent="#accordionExample">
          <div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
            Ja, du kannst deine Bestellung innerhalb von 14 Tagen nach Erhalt zurücksenden oder umtauschen. Bitte
            beachte, dass die Artikel ungetragen und in ihrem ursprünglichen Zustand sein müssen.
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header" id="headingThree">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"
            style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
            Welche Zahlungsmethoden akzeptiert der Shop?
          </button>
        </h2>
        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
          data-bs-parent="#accordionExample">
          <div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
            Wir akzeptieren Kreditkarten, PayPal, Sofortüberweisung und Vorkasse.
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <h2 class="accordion-header" id="headingFour">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"
            style="background-color: rgba(194, 116, 79, 0.877); color: cornsilk;">
            Wie pflege ich die Kleidungsstücke richtig?
          </button>
        </h2>
        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
          data-bs-parent="#accordionExample">
          <div class="accordion-body" style="background-color: rgba(194, 115, 79, 0.721);">
            Die Pflegeanweisungen findest du auf dem Etikett jedes Artikels. Bitte beachte, dass manche Artikel
            professionell gereinigt werden sollten oder auf niedriger Temperatur gewaschen werden müssen.
          </div>
        </div>
      </div>
    </div>
  </div>

  <div id="footer"></div>

  <script src="./javascript/main.js"></script>
</body>

</html>

and my CSS:

* {
    font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
        sans-serif;
    color: cornsilk;
    box-sizing: border-box;

}

.registrierungLabel {
    color: rgba(126, 79, 24, 0.514);
}

a {
    color:rgb(184, 107, 82);
    text-decoration: none;
}
a:hover  {
    color: cornsilk;
}

html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0;
    /* Remove scrollbar space */
    background: transparent;
    /* Optional: just make scrollbar invisible */
}

body {
    padding-top: 140px;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: auto;
    background-color: #e9aa83;
}

.btn{
    border-style: none;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-primary{
    background-color: cornsilk;
    color:rgb(184, 107, 82);
}

.btn:hover {
    background-color:rgb(184, 107, 82);
    color: cornsilk !important;
}

.accordion-item {
    border-color: rgba(135, 74, 54, 0.79);
}

@media screen and (max-width: 768px) {
    .card-image {
        width: 300px;
    }

    .card-products {
        width: 300px;
    }
}

.card-products {
    padding-left: 0px;
    padding-right: 0px;
}

.content{
    min-height: calc(100% - 50px);
    padding-bottom: 50px;
}

.navbar{
    background-color: #e9aa83;
}

I have tried to comment out a few lines in CSS (body – min-height and content), that does nothing. I’ve also checked if I forgot to close a tag somewhere. Nothings seems to work and I am desperate, please help.

Revisited dozens of replies to this thread – none of them resulted in a solution to the problem.
Laravel with FullCalendar plugin is used.

document.addEventListener('DOMContentLoaded', function () {
                var calendarEl = document.getElementById('calendar');
                var calendar = new FullCalendar.Calendar(calendarEl, {
                    eventClick: function (info) {
                        var eventObj = info.event;
                        $('#Modal').modal('show');
                        var ide = eventObj.id;
                        // console.log(ide);
                        var event;
                        $.ajax({
                            url: "json.json",
                            dataType: "json",
                            async: true,
                            success: function (msg) {
                                event = msg;
                                // console.log(test)
                                const comment = [...event].find(el => el.id === ide)["comments"];

                                $('#comment').html(comment);
                            },

                            error: function (xhr, status, error) {
                                alert(xhr.responseText + '|n' + status + '|n' + error);
                            }
                        });
                    }
                })
                calendar.render();
            });

After clicking in the modal window there is no data, in the console the error [Uncaught TypeError: [].find(…) is undefined].
Code changes to

const comment = event.find(el => el.id === ide)["comments"];

or

const comment = $(event).find(el => el.id === ide)["comments"];

or

const comment = $(this).find(el => el.id === ide)["comments"];

does not result in error-free execution. Thanks for any thoughts on this issue!

When I drag and drop the shift in table row and if table width is less and there are more shift for particular day the table shivers , not allowing the user to efficiently drop the shift. What change should I do in below code.

<DragDropContext onDragEnd={onDragEnd}>
                        <ShiftsCreate />
                        <div className="filter-container">
                            <div className="datagrid-common-style">
                                <div className="title">
                                    <h4>Shifts</h4>
                                    <div className="filters">
                                        <input
                                            type="search"
                                            value={searchTerm}
                                            onChange={(e) => dispatch(setSearchTerm(e.target.value))}
                                            className="search"
                                            placeholder="Search Here.."
                                        />
                                    </div>
                                </div>
                                <ShiftsTable />
                            </div>
                        </div>
                    </DragDropContext>

<Droppable droppableId={`${employeeID}-${field}`} direction="horizontal">
                {(provided: any) => (
                    <div {...provided.droppableProps} ref={provided.innerRef} className="shift-drag-cell">
                        {shifts &&
                            Array.isArray(shifts) &&
                            shifts.map((shift, idx) => (
                                <>
                                    {shift[field] ? (
                                        <Draggable
                                            key={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                            draggableId={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                            isDragDisabled={!userWritePermission}
                                            index={idx}>
                                            {(provided) => (
                                                <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                                    <div key={shift["shiftTemplateID"]} className="column-drag-cell">
                                                        <h5
                                                            style={{
                                                                color: getShiftData(shift["shiftTemplateID"])?.color,
                                                                whiteSpace: "nowrap",
                                                            }}>
                                                            {getShiftData(shift["shiftTemplateID"])?.name}
                                                        </h5>
                                                        <ClearIcon
                                                            id={`${employeeID}-${field}-${shift["shiftTemplateID"]}`}
                                                            onClick={(e) => {
                                                                if (userWritePermission) {
                                                                    removeShift(e);
                                                                }
                                                            }}
                                                            sx={{ fontSize: "14px", cursor: "pointer" }}
                                                        />
                                                    </div>
                                                </div>
                                            )}
                                        </Draggable>
                                    ) : null}
                                </>
                            ))}
                    </div>
                )}
            </Droppable>

I tried searching for an answer on documents but could not get.

I have added some regex to validate the input fields against xss vulnerabilities. Is my regex up to the mark(i,e Is it covering all the possible xss values).

EMAIL_REGEXP = /(b)(onS+)(s*)=|javascript|<(|/|[^/>][^>]+|/[^>][^>]+)>/i;

I just tested for the following values:

  1. <b click="javascript:eval(alert(new Data.now()))">Test</b>
  2. <script>alert(1)</script>
  3. <a href="xx.com">text</a>
  4. <img src=javascript:eval(alert('img')) />

solution required:

1. If I am missing any values in the regex, Please suggest.

2. Please suggest the valid script/html values which the regex is rejecting.

Stackblitz ref…